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Introduccion a las CSS 

El lenguaje HTML esta limitado a la hora de aplicarle forma a un documento. Esto es asf porque 
fue concebido para otros usos (cientfficos sobretodo), distinto a los actuales, mucho mas 
amplios. 

Para solucionar estos problemas los disenadores han utilizado tecnicas tales como la utilizacion 
de tablas imageries transparentes para ajustarlas, utilizacion de etiquetas que no son 
estadares del HTML y otras. Estas "trampas" han causado a menudo problemas en las paginas 
a la hora de su visualizacionen distintas plataformas. 

Ademas, los disenadores se han visto frustrados por la dificultad con la que, aun utilizando 
estos trucos, se encontraban a la hora de maquetar las paginas, ya que muchos de ellos 
venian maquetando paginas sobre el papel, donde el control sobre la forma del documento es 
absoluto. 

Finalmente, otro antecedente que ha hecho necesario el desarrollo de esta tecnologfa consiste 
en que las paginas web tienen mezclado en su codigo HTML el contenido del documento con 
las etiquetas necesarias para darle forma. Esto tiene sus inconvenientes ya que la lectura del 
codigo HTML se hece pesada y diffcil a la hora de buscar errores o depurar las paginas. 

Aunque, desde el punto de vista de la riqueza de la informacion y la utilidad de las paginas a la 
hora de almacenar su contenido, es un gran problema que estos textos est&aacuteen 
mezclados con etiquetas incrustadas para dar forma a estos: se degrada su utilidad. 

En estas paginas de CSS pretendemos dar a conocer la tecnologfa con un enfoque practico 
para que en pocos capftulos podais usar las CSS de una manera depurada, reflejando toda 
nuestra experiencia en su uso. No pretendendemos explorar todos los aspectos de la 
tecnologfa ya que para realizar esto necesitariamos un la extension de un libro entero. 

Referenda: Este manual trata los aspectos mas teoricos de las hojas en cascada. En DesarrolloWeb.com 
tambien podemos encontrar otro manual con unos talleres practicos de aplicacion de las CSS . 

Artfculo por Miguel Angel Alvarez 


Caracteristicas y ventajas de las CSS 

El modo de funcionamiento de las CSS consiste en definir, mediante una sintaxis especial, la 
forma de presentacion que le aplicaremos a: 

• Un web entero, de modo que se puede definir la forma de todo el web de una sola vez. 

• Un documento HTML o pagina, se puede definir la forma, en un pequeno trozo de 
codigo en la cabecera, a toda la pagina. 

• Una porcion del documento, aplicando estilos visibles en un trozo de la pagina. 

• Una etiqueta en concreto, llegando incluso a poder definir varios estilos diferentes para 
una sola etiqueta. Esto es muy importante ya que ofrece potencia en nuestra 
programacion. Podemos definir, por ejemplo, varios tipos de parrafos: en rojo, en azul, 
con margenes, sin ellos... 
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La potencia de la tecnologfa salta a la vista. Pero no solo se queda aquf, ya que ademas esta 
sintaxis CSS permite aplicar al documento formato de modo mucho mas exacto. Si antes el 
HTML se nos quedaba corto para maquetar las paginas y temamos que utilizar trucos para 
conseguir nuestros efectos, ahora tenemos muchas mas herramientas que nos permiten definir 
esta forma: 

• Podemos definir la distancia entre Ifneas del documento. 

• Se puede aplicar identado a las primeras Ifneas del parrafo. 

• Podemos colocar elementos en la pagina con mayor precision, y sin lugar a errores. 

• Y mucho mas, como definir la visibilidad de los elementos, margenes, subrayados, 
tachados... 

Y seguimos mostrandoos ventajas, ya que si con el HTML tan solo podfamos definir atributos 
en las paginas con pixeles y porcentajes, ahora podemos definir utilizando muchas mas 
unidades como: 

• Pixels (px) y porcentaje (%), como antes. 

• Pulgadas (in) 

• Puntos (pt) 

• Centfmetros (cm) 


Navegadores que lo soportan 

Esta tecnologfa es bastante nueva, por lo que no todos los navegadores la soportan. En 
concreto, solo los navegadores de Netscape versiones de la 4 en adelante y de Microsoft a 
partir de la version 3 son capaces de comprender los estilos en sintaxis CSS. Ademas cabe 
destacar que no todos los navegadores implementan las mismas funciones de hojas de estilos, 
por ejemplo, Microsoft Internet Explorer 3 no soporta todo lo relativo a capas. 

Esto quiere decir que debemos de usar esta tecnologfa con cuidado, ya que muchos usuarios 
no podran ver los formatos que apliquemos a las paginas con CSS. Asf pues, utilizad las hojas 
de estilos cuando estas no vayan a suponer un problema. 

Artfculo por Miguel Angel Alvarez 


Usos de las CSS I 


Vamos ahora a describir los diferentes usos de las CSS introducidos 
en el anterior capftulo. Vamos por orden, describiendo los puntos 
segun su dificultad e importancia. 

Hemos partido este capftulo en dos partes por su extension y por haber varias formas distintas 
de aplicar estilos, aquf veremos las mas sencillas y en el capftulo siguiente otras mas 
complicadas pero mas potentes. 

Pequenas partes de la pagina 

Para definir estilos en secciones reducidas de una pagina se utiliza la etiqueta <SPAN>. Con 
su atributo style indicamos en sintaxis CSS las caracterfsticas de estilos. Lo vemos con un 
ejemplo, pondremos un parrafo en el que determinadas palabras las vamos a visualizar en 


CSS tiene una sintaxis propia, la 
veremos a traves de ejemplos. 
Luego se vera con detalle 
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color verde. 

<p> 

Esto es un parrafo en varias palabras <SPAN style="color:green">en color verde</SPAN>. resulta muy 
facil. 

</P> 


Que tiene como resultado: 

Esto es un parrafo con varias palabras en color verde. resulta muy facil. 

Estilo definido para una etiqueta 

De este modo podemos hacer que toda una etiqueta muestre un estilo determinado. Por 
ejemplo, podemos definir un parrafo entero en color rojo y otro en color azul. Para ello 
utilizamos el atributo style, que es admitido por todas las etiquetas del HTML (siempre y 
cuando dispongamos de un navegador compatible con CSS). 

<p style="color:#990000"> 

Esto es un parrafo de color 

</P> 

<p style="color:#000099"> 

Esto es un parrafo de color 

</P> 


Que tiene como resultado: 

Esto es un parrafo de color rojo. 

Esto es un parrafo de color azul. 

Estilo definido en una parte de la pagina 

Con la etiqueta <DIV> podemos definir secciones de una pagina y aplicarle estilos con el 
atributo style, es decir, podemos definir estilos de una vez a todo un bloque de la pagina. 

<div style= "color:#000099; font-weight:bold"> 

<h3>Estas etiquetas van en <i>azul y 
negrita</ix/h3> 

<P> 

Seguimos dentro del DIV, luego permanecen los etilos 
</P> 

</div> 

Que tiene como resultado: 


Estas etiquetas van en azuly negrita 

Seguimos dentro del DIV, luego permanecen los etilos 


Hasta aquf este capftulo, en el siguiente seguiremos viendo formas mas avanzadas de usar las 
CSS. 

Artfculo por Miauel Anael Alvarez 
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Usos de las CSS y II 

Estilo definido para toda una pagina 

Podemos definir, en la cabecera del documento, estilos para que sean aplicados a toda la 
pagina. Es una manera muy comoda de darle forma al documento y muy potente, ya que estos 
estilos seran seguidos en toda la pagina y nos ahorraremos asf muchas etiquetas HTML que 
apliquen forma al documento. Ademas, si deseamos cambiar los estilos de la pagina lo 
haremos de una sola vez. 

Este ejemplo es mas complicado, puesto que se utiliza la sintaxis CSS de manera mas 
avanzada. Pero no te preocupes puesto que con los ejemplos iras aprendiendo su uso y mas 
tarde comentaremos la sintaxis en profundidad. 

En el ejemplo vemos que se utiliza la etiqueta <STYLE> colocada en la cabecera de la pagina 
para definir los distintos estilos del documento. 

A grandes rasgos, entre de <STYLE> y </STYLE>, se coloca el nombre de la etiqueta que 
queremos definir los estilos y entre Naves -{}- colocamos en sintaxis CSS las caracteristicas de 
estilos. 


<html> 

<head> 

<title>Ejemplo de estilos para toda una p&aacute;gina</title> 
<STYLE type="text/css"> 

<!— 

HI {text-decoration: underline; text-align:center> 

P {font-Family:arial,verdana; color: white; background-color: black} 
BODY {color:black;background-color: #cccccc; text-indent:lcm} 
//--> 

</STYLE> 

</head> 

<body> 

<hl>P&aacute;gina con estilos</hl> 

Bienvenidos... 

<p>Siento ser tan hortera, pero esto es un ejemplo sin m&aacute;s 
importancia</p> 

</body> 

</html> 


Como se puede apreciar en el codigo, hemos definido que la etiqueta <H1> se presentara 

• Subrayado 

• Centrada 

Tambien, por ejemplo, hemos definido que el cuerpo entero de la pagina (etiqueta <BODY>) 
se le apliquen los estilos siguientes: 

• Color del texto negro 

• Color del fondo grisaceo 

• Margen lateral de 1 centfmetro 

Caber destacar que si aplicamos estilos a la etiqueta <BODY>, estos seran heredados por el 
resto de las etiquetas del documento. Esto es asf siempre y cuando no se vuelvan a definir 
esos estilos en las siguientes etiquetas, en cuyo caso el estilo de la etiqueta mas concreta sera 
el que mande. Puede verse este detalle en la etiqueta <P>, que tiene definidos estilos que ya 
fueron definidos para <BODY>. Los estilos que se tienen en cuenta son los de la etiqueta <P>, 
que es mas concreta. 
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Por ultimo, ha de apreciarse los comentarios HTML que engloban toda la declaracion de estilos: 
<!—Declaracion de estilos—>. Estos comentarios se utilizan para que los navegadores 
antiguos, que no comprenden la sintaxis CSS, no incluyan ese texto en el cuerpo de la pagina. 
Si no se pusiera, los navegadores antiguos (por ejemplo Netscape 3) escribirfan ese "feo 
codigo" en la pagina. 

Pulsa para ver el ejemplo anterior . 

Hemos preparado la misma pagina, pero con declaraciones de estilos distintas, para que 
comprobeis las diferencias en la forma del documento con solo unos cambios en sus estilos. 

Puedes verla pinchando aauf . 

Estilo definido para todo un sitio web 

Una de las caracteristicas mas potentes de la programacion con hojas de estilos consiste en 
que, de una vez, podemos definir los estilos de todo un sitio web. Esto se consigue creando un 
archivo donde tan solo colocamos las declaraciones de estilos de la pagina y enlazando todas 
las paginas del sitio con ese archivo. De este modo, todas las paginas comparten una misma 
declaracion de estilos y, por tanto, si la cambiamos, cambiaran todas las paginas. Con las 
ventajas anadidas de que se ahorra en Ifneas de codigo HTML (lo que reduce el peso del 
documento) y se evita la molestia de definir una y otra vez los estilos con el HTML, tal como se 
comento anteriormente. 

Veamos ahora como el proceso para incluir estilos con un fichero externo. 

1- Creamos el fichero con la declaracion de estilos 

Es un fichero de texto normal, que puede tener cualquer extension, aunque le podemos 
asignar la extension .css para aclararnos que tipo de archivo es. El texto que debemos incluir 
debe ser escrito exclusivamente en sintaxis CSS, es decir, seria erroneo incluir codigo HTML en 
el: etiquetas y demas. Podemos ver un ejemplo a continuacion. 


p { 

font-size : 12pt; 
font-family : arial,helvetica; 
font-weight : normal; 


> 

HI { 


font-size : 36pt; 
font-family : verdana,arial; 
text-decoration : underline; 
text-align : center; 
background-color : Teal; 


> 

TD { 


font-size : lOpt; 
font-family : verdana,arial; 
text-align : center; 
background-color : 666666; 


BODY { 

background-color : 
#006600; 
font-family ; arial; 
color : White; 

> 


2- Enlazamos la pagina web con la hoja de estilos 
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Para ello, vamos a colocar la etiqueta <LINK> con los atributos 

• rel="STYLESHEET" indicando que el enlace es con una hoja de estilos 

• type="text/css" porque ela archivo es de texto, en sintaxis CSS 

• href="estilos.css" indica el nombre del fichero fuente de los estilos 

Veamos una pagina web entera que enlaza con la declaracion de estilos anterior: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 

<html> 

<head> 

<link rel = "STYLESHEET" type="text/css" href="estilos.css"> 

<title>P&aacute;gina que lee estilos</title> 

</head> 

<body> 

<hl>P&aacute;gina que lee estilos</hl> 

Esta p&aacute;gina tiene en la cabecera la etiqueta necesaria para enlazar con la hoja de estilos. Es muy 
f&aacute;cil. 

<br> 

<br> 

<table width = "300" cellspacing = "2" cellpadding = "2" border="0"> 

<tr> 

<td>Esto est&aacute; dentro de un TD, luego tiene estilo propio, declarado en el fichero externo</td> 
</tr> 

<tr> 

<td>La segunda fila del TD</td> 

</tr> 

</table> 

</body> 

</html> 


El resultado conseguido se puede ver aquf 

Reglas de importancia en los estilos 

Los estilos se heredan de una etiqueta a otra, como se indico anteriormente. Por ejemplo, si 
tenemos declarado en el <BODY> unos estilos, por lo general, estas declaraciones tambien 
afectataran a etiquetas que esten dentro de esta etiqueta, o lo que es lo mismo, dentro de 
todo el cuerpo. 

En muchas ocasiones mas de una declaracion de estilos afecta a la misma porcion de la 
pagina. Siempre se tiene en cuenta la declaracion mas particular. Pero las declaraciones de 
estilos se pueden realizar de multiples modos y con varias etiquetas, tambien entre estos 
modos hay una jerarqufa de importancia para resolver conflictos entre varias declaracionesde 
estilos distintas para una misma porcion de pagina. Se puede ver a continuacion esta 
jerarqufa, primero ponemos las formas de declaracion mas generales, y por tanto menos 
respetadas en caso de conflicto: 

• Declaracion de estilos con fichero externo. (Para todo un sitio web) 

• Declaracion de estilos para toda la pagina. (Con la etiqueta <STYLE> en la cabecera de 
la pagina) 

• Estilos definidos en una parte de la pagina. (Con la etiqueta <DIV>) 

• Definidos en una etiqueta en concreto. (Utilizando el atributo style en la etiqueta en 
cuestion) 

• Declaracion de estilo para una porcion pequena del documento. (Con la etiqueta 
<SPAN>) 

Ya vimos como incluir estilos en la pagina, de todas las maneras posibles e hicimos un repaso 
con la lista anterior. Ahora estas en condiciones de empezar a usar las hojas de estilo en 
cascada para mejorar tus paginas y aumentar la productividad de tu trabajo. Pero estate 
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atento a los siguientes capftulos donde aprenderas las lecciones que te faltan para dominar 
bien la materia: conocer la sintaxis, los distintos atributos de estilos y otras cosas que 
mejoraran tus paginas. 

Articulo por Miauel Anael Alvarez 


Otra manera de definir estilos en un archivo externo 

Veamos ahora otra manera de importar una declaracion externa de estilos CSS: @import 
url("archivo_a_importar.css"), que se utiliza para importar unas declaraciones de estilos 
guardadas en la ruta que se indica entre parentesis. (las comillas son opcionales, pero los 
parentesis son obligatorios, por lo menos, en Explorer). 

Se debe incluir en la declaracion de estilos global a una pagina, es decir entre las etiquetas 
<style type="text/css"> y </style>, que se colocan en la cabecera del documento. 

Es importante senalar que la sentencia de importacion del archivo CSS se debe escribir en la 
primera Ifnea de la declaracion de estilos, algo parecido al codigo siguiente. 

<style type="text/css"> 

@import url ("estilo.css"); 
body{ 

background-color: #ffffcc; 

> 

</style> 

El funcionamiento es el mismo que si escribiesemos todo el fichero a importar dentro de las 
etiquetas de los estilos, con la salvedad de que, si redefinimos dentro del codigo HTML (entre 
las etiquetas </style>) estilos que habfan quedado definidos en el archivo externo, los que se 
aplicaran seran los que hayamos redefinido. 

Asf, en el ejemplo anterior, aunque hubiesemos definido en estilo.css un color de fondo para la 
pagina, el color que prevaleceria seria el definido a continuacion de la importacion: #ffffcc 

La diferencia entre este tipo de importacion del tipo y la que hemos visto anteriormente: 

<link rel="stylesheet' type="text/css" href="hoja.css"> 

Es que @import url ("estilo.css") se suele utilizar cuando hay unas pautas basicas en el trabajo 
con los estilos (que se definen en un archivo a importar) y unos estilos especfficos para cada 
pagina, que se definen a continuacion, dentro del codigo HTML entre las etiquetas </style>, 
como es el caso del ejemplo visto anteriormente. 

Articulo por Miauel Anael Alvarez 


Sintaxis CSS 

Tal como se vio en los ejemplos la sintaxis es bastante sencilla y repetitiva. Vamos a verla: 
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Para definir un estilo se utilizan atributos como font-size,text-decoration... segudos de 
dos puntos y el valor que le deseemos asignar. Podemos definir un estilo a base de 
definir muchos atributos separados por punto y coma. 

Ejemplo: 

font-size: lOpt; text-decoration: underline; color: black; (el ultimo punto y coma 
de la lista de atributos es opcional) 

Para definir el estilo de una etiqueta se escribe la etiqueta seguida de la lista de 
atributos encerrados entre Haves. 

Ejemplo: 

Hl{text-align: center; color:black> 

Los valores que se pueden asignar a los atributos de estilo se pueden ver en una tabla 
en el siguiente capftulo. Muchos estos valores son unidades de medida, por ejemplo, el 
valor del tamano de un margen o el tamano de la fuente. Las unidades de medida son 
las siguientes: 


Puntos pt 

Pulgadas in 

Centimetres cm 
pixels px 


Hasta aqui, queda dicho todo lo relativo a la sintaxis. En el siguiente capitulo podras encontrar 
una lista de los atributos de las hojas de estilo en cascada. 

Articulo por Miauel Anael Alvarez 


Atributos de las hojas de estilo 

Tanto para practicar en tu aprendizaje como para trabajar con las CSS lo mejor es disponer de 
una tabla donde se vean los distintos atributos y valores de estilos que podemos aplicarle a las 
paginas web. 

Aqui puedes ver la tabla de los atributos CSS, tenia a mano cuando utilices las CSS. 


Nombre del 
atributo 

Posibles valores 

Ejemplos 

FUENTES - FONT 

color 

valor RGB o nombre de color 

color: #009900; 
color: red; 

Sirve para indicar el color del texto. Lo admiten casi todas las etiqetas de HTML. No I 
admitidos en el estandar, es aconsejable entonces utilizar el valor RGB. 

:odos los nombres de colores son 

font-size 

xx-small | x-small | small | medium | large | x-large | 
xx-large 

Unidades de CSS 

font-size: 12pt; 
font-size: x-large; 

Sirve para indicar el tamano de las fuentes de manera mas rigida y con mayor exactitud. 

font-family 

serif | sans-serif | cursive | fantasy | monospace 

Todas las fuentes habituales 

font-family :arial,helvetica; 
font-family: fantasy; 

Con este atributo indicamos 
las comprenden y utilizan la 
Tambien se pueden definir c 
utilizan comillas para que se 

la familia de tipografia del texto. Los primeros valores son genericos, es decir, los exploradores 
s fuentes que el usuario tenga en su sistema. 

on tipografias normales, como ocurria en html. Si el nombre de una fuente tiene espacios se 
entienda bien. 

font-weight 

normal | bold [ bolder | lighter | 100 | 200 | 300 | 400 
| 500 | 600 | 700 | 800 | 900 

font-weight:bold; 
font-weight: 200; 
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font-style normal | italic | oblique 

Es el estilo de la fuente, que puede ser normal, italica u oblicua. El estilo oblique 

PARRAFOS - TEXT 
line-height normal y unidades CSS 

a lmea,y por tanto, el espaciado entre h'neas. Es 


font-style: normal; 
font-style: italic; 
s similar al italic. 


text-decoration non 

Para establecer la decoracion de 
text-align left | right | center | justify 


el espaciado entre h'neas. Es una de esas caracteristicas que 
le | [ underline || overline || line-through ] 


line-height: 12px; 
line-height: normal; 

podian mofificar utilizando 


El alto de 
HTML. 

text-decoration: none; 
text-decoration: underline; 
si esta subrayado, sobrerayado o tachado. 

text-align: right; 
text-align: center; 

Sirve para indicar la alineacion del texto. Es interesante destacar que las hojas de estilo permiten el justificado de texto, 
aunque recuerda que no tiene por que funcionar en todos los sistemas. 

text-indent unless £S3£: Sf 

Un atributo que sirve para hacer sangrado o margenes en las paginas. Muy util y novedosa. 
text-transform capitalize | uppercase | lowercase | none jSSSK cartelize; 

Nos permite transformar el texto, haciendo que tenga la primera letra en mayusculas de todas las palabrs, todo en 
mayusculas o minusculas. 

FONDO - BACKGROUND 


Un color, con su nombre o su valor RGB 


background-image: url(marmol.gif) ; 
background-image: 
url(http://www.x.com/fondo.gif) 
la, se puede ver una pagina de eiemplo 


Background- 
color 

Sirve para indicar el color de fondo de un elemento de la pagina. 

Background- El nombre de la imagen con su camino relativo o 

image absoiuto 

Colocamos con este atributo una imagen de fondo en cualquier elemento de la p 

BOX - CAJA 

Margin-left Unidades CSS ma» S; 

Indicamos con este atributo el tarnano del margen a la izquierda 

Margin-right unidades css ™3£3K; 

Se utiliza para definir el tarnano del margen a la derecha 

Margin-top »d,*scss & 

Indicamos con este atributo el tarnano del margen arriba de la pagina 

Margin-bottom Unidades CSS margin-bottom: Opt; 

margin-top: lpx; 

Con el se indica el tarnano del margen en la parte de abajo de la pagina 

Padding-left unless BKKS? 

Indica el espacio insertado, por la izquierda, entre el borde del elemento-continente y el contenido de este. Es parecido a el 
atributo cellpadding de las tablas. 

El espacio insertado tiene el mismo fondo que el fondo del elemento-continente. 

padding-right: 0.5cm; 
padding-right: lpt; 

Indica el espacio insertado, en este caso por la derecha, entre el borde del elemento-continente y el contenido de este. Es 
parecido a el atributo cellpadding de las tablas. 

El espacio insertado tiene el mismo fondo que el fondo del elemento-continente. 

padding-top: lOpt; 
padding-top: 5px; 

Indica el espacio insertado, por arriba, entre el borde del elemento-continente y el contenido de este. 
Padding-bottom unidades CSS padding-right: 0.5cm; 


Padding-right unidades css 


Padding-top 


Unidades CSS 


Indica el espacio insertado, e 


padding-right: lpt; 
o por abajo, entre el borde del elemento-continente y el contenido de e< 
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Border-Color color RGB y nombre de color 


border-color: red; 
border-color: #ffccff; 


Para indicar el color del borde del elemento de la pagina al que se lo aplicamos. Se puede poner colores por separado con los 
atributos border-top-color, border-right-color, border-bottom-color, border-left-color. 


Border-style 


none | dotted | solid | double | groove | ridge | inset | border-style: solid; 
outset border-style: double; 


El estilo del borde, los valores significan: none=ningun borde, dotted = punteado (no parece funcionar), solid=solido, 
double=doble borde, y desde groove hasta outset son bordes con varios efectos 3D. 


border-width umdades css 


border-width: lOpx; 
border-width: 0.5in; 


El tamano del borde del elemento al que lo aplicamos. 

Para ver otros ejemlos de Box pulsar aqui 

float none | left | right float: right; 


Sirve para alinear un elemento a la izquierda o la derecha haciendo que el texto se agrupe alrededor de dicho elemento. Igual 
que el atributo align en imagenes en sus valores right y left. 

Clear none | right | left clear: right; 


Si este elemento tiene a su altura imagenes u otros elementos alineados a la derecha o la izquierda, con el atributo clear 
hacemos que se coloque en un lugar donde ya no tenga esos elementos a el lado que indiquemos. 

Para ver una pagina que utiliza float y clear pulsar aqui 


La especificacion de estilos CSS es muy amplia, seguro que se queda en el tintero algun 
atributo de estilo, pero creo que la inmensa mayoria estan, y por supuesto la seleccion de los 
mas importantes. 


Artfcuio por Miauel Anael Alvarez 


Trucos avanzados con CSS 

Las hojas de estilos son un tema largo del que se han escrito libros enteros. Nosotros nos 
centramos en los temas practicos y por ello vamos a acabar ya con este capftulo, en unos 
cuantos puntos 

Definir estilos utilizando clases 

Las clases nos sirven para crear definiciones de estilos que se pueden utilizar repetidas veces. 

Una clase se puede definir entre las etiquetas <STYLE> (en la cabecera del documento), o en 
un archivo externo a la pagina. Para definirlas utilizamos la siguiente sintaxis, un punto 
seguido del nombre de la clase y entre Naves los atributos de estilos deseados. De esta 
manera: 

.nombredelaclase {atributo: valor;atributo2:valor2; ...} 

Una vez tenemos una clase, podemos utilizarla en cualquier etiqueta HTML. Para ello 
utilizaremos el atributo class, poniendole como valor el nombre de la clase, de esta forma: 

<ETIQUETA class="nombredelaclase"> 

Ejemplo d e la utilizacion de clases _ 

|<html> 

|<head> 
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<title>Ejemplo de la utilizaci&oacutejn de clases</title> 

<STYLE type="text/css"> 

.fondonegroletrasblancas {background-color:black;color:white;font-size:12;font-family:arial> 
.letrasverdes {color:#009900} 

</STYLE> 

</head> 

<hl class=letrasverdes>Titulo l</hl> 

<hl class=fondonegroletrasblancas>Titulo 2</hl> 

<p class=letrasverdes> 

Esto es un p&aacute;rrafo con estilo de letras verdes</p> 

<p class=fondonegroletrasblancas> 

Esto es un p&aacute;rrafo con estilo de fondo negro y las letras blancas. Es todo!</p> 
</body> 

</html> 


Ver el ejemplo anterior 

Estilo en los enlaces 

Una tecnica muy habitual, que se puede realizar utilizando las hojas de estilo en cascada y no 
se podia en HTML, es la definicion de estilos en los enlaces, quitandoles el subrayado o hacer 
enlaces en la misma pagina con distintos colores. 

Para aplicar estilo a los enlaces debemos definirlos para los distintos tipos de enlaces que 
existen (visitados, activos...). Utilizaremos la siguiente sintaxis, en la declaracion de estilos 
global de la pagina (<STYLE>) o del sitio (Definicion en un archivo externo): 

Enlaces normales 

A:link {atributos} 

Enlaces visitados 

A:visited {atributos} 

Enlaces activos (Los enlaces estan activos en el presiso momento en que se pincha sobre ellos) 

A:active {atributos} 

Enlaces hover (Cuando el raton esta encima de ellos, solo funciona en ieplorer) 

A:hover {atributos} 

El atributo para definir enlaces sin subrayado es text-decoration:none, y para darles color es 
color:tu_color. 

Tambien podemos definir el estilo de cada enlace en la propia etiqueta <A>, con el atributo 
style. De esta manera podemos hacer que determinados enlaces de la pagina se vean de 
manera distinta 

Ejemplo de estilos e n enlaces _ 

<html> 

<head> 

<title>Ejemplos de estilo en enlaces</title> 

<STYLE type="text/css"> 

A:link {text-decoration:none;color:#0000cc;> 

A:visited {text-decoration: none; color: #ffcc33;} 

A: active {text-decoration: none;color:#ffOOOO;} 

A:hover {text-decoration:underline;color:#999999;font-weight:bold} 

</STYLE> 

</head> 

<a href="http://dominioinexistente.nofunciona.com">Enlace normal</a> 
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<a href= ,, enlaces.html">Enlace visitado</a> 

Pulsar este enlace para verlo activo, 

poner el rat&oacute;n por encima para que cambie. 

</body> 

</html> 


Ver el ejemplo anterior 
URL como valor de un atributo: 

Determinados atributos de estilos, como background-image necesitan una URL como valor, 
para indicarlas podemos definir tanto caminos relativos como absolutos. Asf pues, podemos 
indicar la URL de la imagen de fondo de estas dos maneras: 

background-image: url(fondo.gif) En caso de que la imagen este en el mismo directorio que la pagina. 

background-image: url(http://www.desarrolloweb.com/images/fondo.gif) 

Ocultar estilos en navegadores antiguos 

En caso de definir dentro de la etiqueta <STYLE> unas declaraciones de estilos debemos 
asegurarnos que estas no se imprimiran en la pagina web con navegadores antiguos. Pensar 
en un navegador que no reconozca la etiqueta <STYLE>, pensara que corresponde con algo 
que no entiende y se olvidara de la etiqueta. Lo siguiente que encuentra es texto normal y 
hara que este se vea en la pagina, como con cualquier otro texto. 

Para evitarlo debemos ocultar con comentarios HTML (<!— esto es un comentario -->) todo lo 
que hay dentro de la etiqueta <STYLE>. Se puede ver un ejemplo de esto a continuacion: 

De este modo hemos terminado la primera parte del manual de CSS, que espero pueda ayudar 
a hacer paginas mejores y mas rapidamente. Ahora el manual continua explicando conceptos 
sobre capas y maquetacion CSS , entre otros asuntos. 

Quiero recordaros que siempre es util ver como han hecho sus paginas otros progradores de 
Internet. Para ver una pagina definida enteramente con hojas de estilos podemos visitar Web 
Site Album , que esta incluso maauetada con CSS . Tambien podemos visitar la direccion 
www.guiarte.com , que esta maquetada con tablas, pero todos los estilos se aplican con css. 

Para ver otros manuales, artfculos y enlaces a paginas que ensenan a utilizar las hojas de 
estilos visitar la seccion correspondiente a CSS de nuestro directorio . 


Articulo por Miauel Anael Alvarez 


Que son las capas 

Veamos una pequena introduccion a lo que son las capas, la etiqueta HTML <DIV> 
utilizada para construirla y los atributos CSS con los que podemos aplicar estilos. 

Como ya hemos visto en nuestro manual de CSS. <SPAN> sirve para aplicarle estilo a una 
pequena parte de una pagina HTML. Por ejemplo, con ella podriamos hacer que una parte de 
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un parrafo se coloree en rojo. Con <SPAN> no es habitual englobar un trozo muy grande de 
texto, por ejemplo el que comprenda a varios parrafos. 

Con <DIV> tambien podemos aplicar estilo a partes de la pagina HTML. 

La diferencia entre <SPAN> y <DIV> es que con esta ultima si que podemos aplicar estilo a 
una parte mas amplia de la pagina, por ejemplo a tres parrafos. Ademas que la etiqueta 
<DIV> tiene un uso adicional que es el de crear divisiones en la pagina a las que 
podremos aplicar una cantidad adicional de atributos para modificar sus 
comportamientos. Por ejemplo, con el atributo align de HTML podemos alinear la division al 
centra, izquierda, derecha o justificado. Pero su uso mas destacado es el de convertir esa 
division en una capa. 

Una capa es una division, una parte de la pagina, que tiene un comportamiento muy 
independiente dentro de la ventana del navegador, ya que la podemos colocar en cualquier 
parte de la misma y la podremos mover por ella independientemente, por poner dos 
ejemplos. En el uso de capas se basan muchos de los efectos mas comunes del DHTML. 

Las etiquetas <LAYER> e <ILAYER> tienen como objetivo construir capas, pero estas no son 
compatibles mas que con Netscape, por lo que es recomendable utilizar la etiqueta <DIV> 
para hacer capas preferentemente a las otras dos. 

Los atributos que podemos aplicar a estas etiquetas, pero en concreto a las dos recomendadas 
<SPAN> y <DIV>, son principalmente de estilos CSS. Estos atributos nos permiten, como 
hemos podido ver en el manual de hojas de estilo en cascada de desarrolloweb, modificar de 
una manera muy exhaustiva la presentacion de los contenidos en la pagina. Para aplicar estilos 
a estas etiquetas se utiliza el atributo de HTML style, de esta manera: 

<SPAN style="text-decoration:underline;font-weight:bold">...</SPAN> 

<DIV style="color:red;font-size: 10px">...</DIV> 

Como ya pudimos ver muchos ejemplos en el manual de CSS , nos referimos a el para ampliar 
esta informacion. Pero no habfamos visto todavfa una serie de atributos que nos sirven para 
posicionar la division en la pagina como una capa. Estos atributos se pueden aplicar a la 
etiqueta <DIV> que es la que servfa para crear capas compatibles con todos los navegadores. 

Los atributos para que la division sea una capa son varios y se pueden ver a 
continuacion. 

<div id="cl" style="positionabsolute; left: 200px; top: 100px;"> 

Hola! 

</div> 

El primero, position, indica que se posicione de manera absoluta en la pagina y los segundos, 
left y top, son la distancia desde el borde izquierdo de la pagina y el borde superior. 

Hay otros atributos especiales para capas como width y height para indicar la anchura y 
altura de la capa, Z-index que sirve para indicar que capas se ven encima de que otras, clip 
que sirve para recortar una capa y hacer que partes de ella no sean visibles, o visibility para 
definir si la capa es visible o no. Estos y otros atributos los veremos en el siauiente capitulo, 
donde hablaremos del posicionamiento de capas . 


Artfcuio por Miauel Anael Alvarez 
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Atributos para capas 

Hemos visto en el capftulo anterior que son las capas y alaunas pequenas muestras sobre 
como crearlas y darle algun estilo . Ahora vamos a ver en detenimiento los atributos especfficos 
para aplicar posicionamiento a una capa y otros estilos. 

Antes que nada cabe dedr que una capa puede tener cualquier atributo de estilos de los que 
hemos visto en el manual de CSS . Asf, el atributo color indica el color del texto de la capa, el 
atributo font-size indica el tamano del texto y asf con todos los atributos ya vistos. 

Ahora bien, existen una serie de atributos que sirven para indicar la forma, el tamano de las 
capas, la visibilidad, etc, que no hemos visto en capftulos anteriores y que veremos a 
continuacion. 

Atributo position 

Indica el tipo de posicionamiento de la capa. Puede tener dos valores, relative o absolute. 

- relative indica que la posicion de la capa es relativa a el lugar donde se estaba escribiendo en 
la pagina en el momento de escribir la capa con su etiqueta 

- absolute indica que la posicion de la capa se calcula con respecto al punto superior izquierdo 
de la pagina. 

Atributo top 

Indica la distancia en vertical donde se colocara la capa. Si el atributo position es absolute, top 
indica la distancia del borde superior de la capa con respecto al borde superior de la pagina. Si 
el atributo position era relative, top indica la distancia desde donde se estaba escribiendo en 
ese momento en la pagina hasta el borde superior de la capa. 

Atributo left 

Basicamente funciona igual que el atributo top, con la diferencia que el atributo left indica la 
distancia en horizontal a la que estara situada la capa. 

Atributo height 

Sirve para indicar el tamano de la capa en vertical, es decir, su altura. 

Atributo width 

Indica la anchura de la capa 

Atributo visibility 

Sirve para indicar si la capa se puede ver en la pagina o permanece oculta al usuario. Este 
atributo puede tener tres valores. 

- visible sirve para indicar que la capa se podra ver. 

- hidden indicara que la capa esta oculta. 

- inherit es el valor por defecto, que quiere decir que hereda la visibilidad de la capa donde 
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esta metida la capa en cuestion. Si la capa no esta metida dentro de ninguna otra se supone 
que esta metida en la capa documento, que es toda la pagina y que siempre esta visible. 

Atributo z-index 

Sirve para indicar la posicion sobre el eje z que tendran las distintas capas de la pagina. Dicho 
de otra forma, con z-index podemos decir que capas se veran encima o debajo de otras, en 
caso de que esten superpuestas. El atributo z-index toma valores numericos y a mayor z- 
index, mas arriba se vera la pagina. 

Atributo clip 

Es un atributo un poco diffcil de explicar. En concreto sirve para recortar determinadas areas 
de la capa y que no se puedan ver. Una capa que esta visible se puede recortar para que se 
vea, pero que no se vea algun trozo de esta. El cliping se indica por medio de 4 valores, con 
esta sintaxis. 


rect (<top>, <right>, <bottom>, <left>) 


Los valores <top>, <right>, <bottom> y <left> indican distancias que se pueden apreciar en 
este esquema. 


punto top-left 
posicionamiento 



bottom 


right 


L 1 





Region visible 





left 

width de la capa 



Este es un ejemplo de capa que utiliza todos los atributos que hemos visto en este artfculo y 
alguno mas para aplicar estilo a la capa. 

<div style="clip: rect(0,158,148,15); height: 250px; width: 170px; left: lOpx; top: 220px; position: absolute; 
visibility: visible; z-index: 10; font-size: 14pt; font-family: verdana; text-align: center; background-color: #bbbbbb"> 

Esta capa tiene un cliping, por eso se ve entrecortada. 

<br> 

<br> 

Esto es una capa de prueba 
</div> 

Puede verse el ejemplo en una pagina web , donde tambien podra apreciarse el efecto 
conseguido al realizar el cliping. 
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Artfculo por Miauel Anael Alvarez 


Problema con el posicionamiento absoluto de capas 

He recibido una consulta en mi correo sobre colocacion de capas de manera absoluta, pero en 
la que no nos importe la definicion de la pantalla del usuario y otros ir y venir de los elementos 
HTML. Nuestro companero expreso su duda de la siguiente manera: 

Si trabajamos con position:absolute dando un left y un top funciona si denes tu pagina 
alineada a la izquierda. Mi pagina esta alineada en el centro, entonces lo que sucede es que 
dependiendo de la resoiucion de pantalla que tengas (ancho de 800px,1024px,etc) me baila 
toda la pagina y no cuadra nada. 

Primero que todo, debemos saber que si trabajamos con el position relative las capas se 
colocan en el lugar donde aparecen dentro del codigo HTML. De este modo, si colocamos una 
capa con position relative dentro de una celda de una tabla, dicha capa apareceria dentro de la 
celda donde la estamos colocando, independientemente del lugar donde se situe la celda al 
cambiar la definicion de la pantalla. 

El problema de esta solucion es que la capa haria crecer la celda de la tabla donde queremos 
colocarla (al igual que cualquier otro elemento HTML que colocasemos dentro de la tabla) y es 
muy probable que nuestro diseno no nos permita este hecho. Seguramente ya habrias notado 
este problema y si no es asf te invito a que crees la capa que intentas colocar con el atributo 
position a relative para ver si con eso tu problema ya esta resuelto. 

En casi todos los casos, la capa que intentamos colocar va a tener que tener el position 
absolute, porque con relative no arreglamos totalmente el problema. Entonces volvemos a el 
problema inicial, que era situar la capa con position absolute en el lugar exacto, 
independientemente de la definicion de pantalla. 

La solucion final que propongo pasa por aplicar algun truquillo. De hecho, estuve hace unos 
dfas preguntandome sobre esa cuestion y al final encontre la solucion, aunque no se me 
ocurrio a mi, sino que la extraje de www.cross-browser.com . 

La idea es un poco compleja y para su puesta en marcha debemos realizar una serie de 
acciones que, sinceramente, considero excesivas para un problema inicialmente sencillo. Asf 
pues, que no asuste lo que voy a soltar a continuacion, que luego tratare de explicarlo un poco 
mejor. 

Nuestro esquema de trabajo consistira en una capa con posicion relativa, que nos servira de 
"ancla" y otra con la posicion absoluta, donde colocaremos el contenido final a mostrar en la 
capa. 

La capa relativa la colocaremos en el lugar aproximado donde queramos que aparezca la capa 
absoluta. La capa absoluta la posicionaremos, una vez cargada la pagina, en un lugar proximo 
a la capa relativa. Por supuesto, estas acciones las vamos a tener que realizar con Javascript, 
que es el lenguaje que nos permite actualizar las posiciones de las capas dinamicamente. 

Detenidamente 
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Dedamos que habria que colocar una capa relativa cercana al lugar donde tiene que aparecer 
la capa con position absolute. Insisto en que las capas relativas se colocan en el lugar donde 
las metemos dentro del codigo HTML, por lo que sera facil colocar la capa relativa en el lugar 
exacto y que este lugar sea valido para cualquier definicion. 

La segunda capa, la que tiene el contenido final, la pondremos inicialmente en una posicion 
cualquiera y escondida, de manera que no se vea que esta mal colocada. Una vez terminada 
de cargar la pagina, podremos acceder a la posicion de la capa relativa, extrayendo sus valores 
top y left y colocandolos en los correspondientes top y left de la capa con posicion absoluta. 
Una vez marcada la posicion de la capa absoluta podemos volverla visible. 


A la vista de la imagen siguiente, la capa con posicion relativa 
la hemos colocado en el enlace. En realidad habria tres capas 
con posicion relativa para poder posicionar otras tantas capas 
con posicion absoluta. La parte que vemos sombreada de verde 
corresponde al espacio que abarcaria la capa relativa. 

Su posicion seria la que esta marcada por el aspa roja que 
aparece en su esquina superior izquierda. Dicha posicion 
depende del lugar donde aparezcan los enlaces en la pagina. 


(x,y) de la capa relativa 

\ 

Op cio n 1 pBBB I Op cion3 j 

/"Sub 2.1 
, / Sub 2.2 

(x,y) de la 

capa absoluta Sub 2.3 


Luego, con Javascript deberiamos asignar la posicion de la capa 
absoluta de una manera parecida a esta. 


left de la capa absoluta = left de la capa relativa 

top de la capa absoluta = top de la capa relativa + altura de la capa relativa 


Podemos sumarle algun pixel mas a la posicion de la capa, si es que queremos moverla un 
poco abajo y a la derecha, tal como hemos visto en la imagen. 


No pretendo en este artfculo, muy a mi pesar y por falta de espacio y tiempo, explicar como se 
hacen esas operaciones de Javascript. Advierto que si no se conoce nada de Javascript va a ser 
imposible ponerse con una tarea tan tediosa como el manejo de capas. Si por el contrario, ya 
hemos tenido contacto con Javascript y DHTML anteriormente, no deberfa ser un problema 
realizar esas acciones. 


Referencias Javascript 

En DesarrolloWeb tenemos un par de manuales de Javascript, que seria necesario estudiar 
para empezar a introducirse en el lenguaje. 

- Proaramacion en Javascript I 

- Programacion en Javascript II 

En el Taller de Javascript tenemos algun artfculo sobre tratamiento dinamico de capas. 

En el momento en el que escribo estas Ifneas no tenemos un manual de DHTML y tratamiento 
de capas completo, por lo que seria recomendable estudiarlo en alguno de los enlaces 
recomendados de nuestra seccion de DHTML del buscador . 


Artfculo por Miauel Anael Alvarez 
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Maquetacion CSS 

En este artfculo vamos a conocer la maquetacion de paginas utilizando Hojas de estilos en 
cascada (CSS). Veremos como realizar este tipo de maquetacion, junto con algunas ventajas e 
inconvenientes. Para muchos sera todavfa un campo por explorar. Aunque no vamos a entrar 
en grandes detalles, vamos a intentar dar a conocer la maquetacion con CSS para que cubrir la 
posible laguna por parte del lector. En capftulos sucesivos ampliaremos la informacion y 
ofreceremos tutoriales mas practicos. 

Como se ha podido aprender en el Manual de CSS , las hojas de estilo en cascada ayudan a 
separar el contenido de la forma, es decir, los elementos que componen una pagina de la 
forma con la que se muestran. Ademas, CSS ayuda en gran medida a la definicion de estilos 
en la pagina, ya que permite ajustar de una manera mucho mas precisa cualquier aspecto de 
cualquier elemento de la pagina. 

La maquetacion con CSS Neva la utilizacion de las hojas de estilo a su grado maximo, de 
manera que cualquier definicion del aspecto de la pagina se realiza en la declaracion CSS que 
enlazamos con el documento HTML. Para definir la situacion de los elementos en la pagina se 
utilizan las capas, a las que se aplica un posicionamiento a traves tambien de las hojas de 
estilo. 

Para crear las capas se utilizan etiquetas <DIV>, en las que se introducen los elementos que 
queramos que aparezcan en la pagina. Los elementos dentro de los <DIV> tambien se pueden 
anidar, para heredar las propiedades y posicionamiento de las capas padre. 

En la maquetacion por capas se definen unicamente etiquetas <DIV> y las tablas solo se 
utilizan para mostrar informacion tabulada, es decir, mostrada en filas y columnas. Cabe 
senalar que en la maquetacion tradicional se utilizan las tablas para ajustar la posicion de los 
elementos en la pagina. Seguro que muchos de los lectores estan muy familiarizados con el 
uso de tablas para maquetar una web, pues se trata de una tecnica bastante sencilla, aunque 
bastante poco practica y que complica un tanto el codigo de las paginas web resultantes. 

La maquetacion por tablas es una forma de crear webs mas evolucionada y que mejora en 
mucho a la maquetacion tradicional, aunque tambien tiene sus inconvenientes. 

Veamos primero algunas de las ventajas de la maquetacion CSS: 

• La separacion del contenido de la pagina y del estilo o aspecto con el que se 
deben mostrar. Tener en cuenta que, cuanto mas separemos estos dos elementos, 
mas sencillo sera el mantenimiento de las paginas y el procesamiento de la informacion. 
Con ello tambien podremos obtener paginas mas limpias y claras. 

• Ahorro en la transferencia. Si todos los estilos y posiciones de los elementos se 
introducen en un documento externo, liberaremos el codigo de la pagina y ocupara 
mucho menos. Como la declaracion de estilos se almacena en la cache del navegador, 
solo se transfiere en la primera pagina que se visita del sitio, con lo que la segunda y 
posteriores paginas que se soliciten se cargaran mucho mas rapido. 

• Facilidad para alterar el aspecto de la pagina sin tocar el codigo HTML. Como 
toda la informacion de los estilos y el posicionamiento de las capas se encuentra en un 
mismo archivo, si deseamos cambiar cualquier elemento de la pagina -ya sea su 
posicion o su aspecto-, solo tenemos que actualizar la hoja de estilos y los cambios se 
veran automaticamente en todo el web. 

Como decimos, tambien hay algunas desventajas: 
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• Compatibilidad con navegadores antiguos. Se necesita que el visitante disponga de 
un navegador bastante avanzado. La mayoria de los visitantes disponen de 
navegadores que soportan caracteristicas avanzadas de las CSS, pero todavfa hay 
mucha gente que no ha actualizado sus equipos o que navega en sistemas de solo 
texto. Los navegadores que no soportan hojas de estilos, por lo menos leeran el codigo 
de la pagina y lo mostraran sin ningun posicionamiento. Elio puede resultar fastidioso, 
pero por lo menos visualizaran todos los datos de la pagina, aunque descolocados y sin 
estilo. 

• Diferencias entre navegadores. Dependiendo del navegador tambien cambian las 
etiquetas de estilos soportadas, por lo que las paginas puede que no se vean 
exactamente igual en unos clientes que en otros. Tambien, al igual que ocurre con 
HTML, hay atributos no estandar o que tienen valores por defecto diferentes. Cuando se 
empieza con la maquetacion en CSS, puede resultar un tema bastante complicado y 
crearnos bastantes dolores de cabeza, no obstante, se trata de, poco a poco, ir 
aprendiendo todos los atributos y los navegadores donde se visualizan o no. 

• Dificultad. Sin duda, si estamos acostumbrados al HTML, pasar a CSS resulta bastante 
mas complicado y requiere un estudio mas profundo. Sin embargo, este paso nos 
brindara un mayor control de los elementos de la pagina y ampliara nuestras fronteras 
a la hora de maquetar. 

Ejemplo CssZenGarden 

Existe un sitio muy interesante e ilustrador que nos puede ayudar a conocer rapidamente la 
potencia de las CSS y hacernos una idea de lo que puede significar su uso. Es un sitio donde se 
muestra un contenido y un diseno bastante logrado. Ademas, dispone de varios enlaces para 
poder ver el mismo sitio, con el mismo contenido, pero con distinto aspecto. De ese modo 
podemos ver como se puede llegar a alterar el diseno de una pagina con tan solo cambiar la 
hoja de estilos. 

La URL del sitio es http://www.csszengarden.com . Es muy interesante que seleccioneis otros 
disenos para ver el cambio radical que puede tener las paginas web con distintas hojas de 
estilos. 

Nosotros hemos explorado un poco las capacidades de las CSS y hemos realizado un ejemplo 
de diseno de CssZenGarden por nuestra cuenta. Podemos verlo en nuestro propio servidor en 
este enlace . 

Por donde continuar 

En DesarrolloWeb.com hemos publicado una Ifnea de artfculos para explicar el proceso de 
creacion de una web, maquetada por completo en CSS . Ademas, podemos referiros a algunas 
paginas en ingles que ofrecen diversas documentaciones y ejemplos: 

http://www.stylegala.com/ 

http://www.cssbeautv.com/ 

http://www.cssvault.com/ 

http://www.webstandardsawards.com/ 


Artfculo por Miauel Anael Alvarez 
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Formas de aplicar estilos en maquetacion CSS 

Vamos a ver otra vez distintos modos de aplicar estilos a las paginas. Es un tema que ya vimos 
en el manual de CSS r pero merece la pena refrescar conceptos y ampliar la informacion que se 
ofrecio en su dfa. 

Aplicacion de estilo a etiquetas 

Se puede asignar el estilo a una etiqueta concreta de HTML. Para ello, en la declaracion de 
estilos escribimos la etiqueta y entre Naves, los atributos de estilo que deseemos. 

body { 

background-color: #fOfOfO; 
color: #333366; 

> 

Podemos aplicar el mismo estilo en un conjunto de etiquetas. Para ello, indicamos las etiquetas 
seguidas por comas y luego, entre Naves, los atributos que queramos definir. 

hi, P { 

color: red; 

> 

En este caso se define que los encabezados de nivel 1 y los parrafos, tengan letra roja. 

Definicion de clases 

Podemos utilizar una clase si deseamos crear un estilo especffico, para luego aplicarlo a 
distintos elementos de la pagina. Las clases en la declaracion de estilos se declaran con un 
punto antes del nombre de la clase. 

.miclase{ 
color: blue; 

> 

Para asignar el estilo definido por una clase en un elemento HTML, simplemente se anade el 
atributo class a la etiqueta que queremos aplicar dicha clase. El atributo class se asigna al 
nombre de la clase a aplicar. Por ejemplo: 

<p class="miclase">este parrafo tiene el estilo definido en la clase "miclase".</p> 

El parrafo anterior se presentarfa con color azul. La definicion de clases y su utilizacion es 
sencilla, pero veamos un ejemplo mas detallado: 

Para la siguiente declaracion de estilos: 

body, td, p{ 

background-color: #000000; 
color: #ffffff; 

> 

.inversof 

background-color: #ffffff; 
color: #000000; 

> 
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Se ha definido un fondo negro y color del texto bianco para el cuerpo de la pagina, asf como 
las celdas y los parrafos. Luego se ha declarado una clase, de nombre "inverso", con los 
colores al reves, es decir, fondo bianco y texto negro. 

<body> 

<p>Hola esto es un parrafo normal</p> 

<p class= "inverso">Parrafo con los colores invertidos</p> 

<table> 

<tr> 

<td class="inverso">INVERSO</td> 

<td>NORMAL</td> 

</tr> 

</table> 

</body> 

Esta pagina tiene, generalmente, el fondo negro y el texto bianco. El primer parrafo, que es un 
parrafo normal, sigue esa definicion general de estilos, pero el segundo parrafo, al que se ha 
aplicado la clase "inverso", tiene el fondo bianco y el texto en negro. Por lo que respecta a la 
tabla, en su primera celda se ha asignado la clase "inverso", por lo que se vera con fondo 
bianco y color de texto en negro. Mientras que la segunda celda, que no tiene asignada 
ninguna clase, se presentara como se definio en la regia general. 

Para conocer los resultados obtenidos en el anterior ejemplo podemos verlo en una pagina 


Estilos que solo se utilizan una vez 

Tambien podemos tener un estilo especffico para un unico elemento, que no va a repetirse en 
ningun otro caso. Para ello tenemos los estilos asignados por identificador. Los identificadores 
se definen en HTML utilizando el atributo id en la etiqueta que deseamos identificar. El valor del 
atributo id sera el que definamos nosotros. 

<div id="capal"> 

En la hoja de estilos, para definir el aspecto de ese elemento con id unico, se escribe el 
caracter almohadilla, seguido del identificador indicado en la etiqueta y entre Naves los 
atributos css que deseemos. 

#capal{ 

font-size: 12pt; 
font-family: arial; 

> 

En este caso se ha asignado fuente de tamano 12 puntos y cuerpo arial. 

Como se puede concluir en la lectura de estas Ifneas, generalmente se prefiere utilizar estilos 
definidos en clases a los definidos con identificadores, a no ser que estemos seguros que ese 
estilo no se va a repetir en todo el documento. 

Referenda: En nuestro taller de CSS hemos publicado varios articulos para mostrar el proceso de 
maquetacion de una paaina en CSS . 

Artfculo por Miauel Anael Alvarez 
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Notacion de colores CSS 

Con CSS se puede especificar colores para cada elemento HTML de la pagina, incluso hay 
elementos que podrian admitir varios colores, como el color de fondo o el color del borde. Pero 
bueno, vamos a ver ahora es las distintas maneras de escribir un color en una declaracion 
CSS. 

Porque lo mas habitual es que especifiquemos un color con su valor RGB, de una manera 
similar a como aprendimos a definir colores en HTML . Pero en CSS tenemos otras maneras de 
declarar colores que pueden interesarnos, como mfnimo para poder entender el codigo CSS 
cuando lo veamos escrito. 

Notacion hexadecimal RGB 

Esta notacion es la que ya conocemos. Se especifican los tres valores de color (rojo, verde y 
azul) con valores en hexadecimal entre 00 y FF. 

background-color: #ff8800; 

Notacion hexadecimal abreviada 

Esta notacion es muy parecida a la anterior, pero permite abreviar un poco la declaracion del 
color, indicando solo un numero para cada valor rojo, verde y azul. Por ejemplo, para 
especificar el color de antes (#ff8800) podriamos haber escrito: 

background-color: #f80; 

Nombre del color 

Tambien podemos definir un color por su nombre. Los nombres de colores son en ingles, los 
mismos que sirven para especificar colores con HTML. 

color: red; 
border-color: Lime; 

Notacion de color con porcentajes de RGB 

Se puede definir un color por los distintos porcentajes de valores RGB. Si todos los valores 
estan al 100% el color es bianco. Si todos estan al 0% obtendriamos el negro y con 
combinaciones de distintos porcentajes de RGB obtendriamos cualquier matiz de color. 

color: rgb(33%, 0%, 0%); 

Notacion por valores decimales de RGB, de 0 a 255 

De una manera similar a la notacion por porcentajes de RGB se puede definir un color 
directamente con valores decimales en un rango desde 0 a 255. 

color: rgb(200,255,0); 

De entre todas estas notaciones podemos utilizar la que mas nos interese o con la que nos 
sintamos mas a gusto. Nosotros en nuestros ejemplos venimos utilizando la notacion 
hexadecimal RGB por habernos acostumbrado a ella en HTML. 

Color transparente 

Para finalizar, podemos comentar que tambien existe el color transparente, que no es ningun 
color, sino que especffica que el elemento debe tener el mismo color que el fondo donde esta. 
Este valor, transparent, sustituye al color. Podemos indicarlo en principio solo para fondos de 
elementos, es decir, para el atributo background-color. 

background-color: transparent; 
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Articulo por Miauel Anael Alvarez 


Definition de estilos CSS Shorthand 

Shorthand: 

Vamos a explicar como escribir de forma reducida nuestras reglas CSS para que nuestros 
archivos de estilo tengan menos peso y sean mas entendibles a la hora de una actualizacion. 

Segun la W3C hay dos formas de escribir la misma regia de CSS: la estandar y la shorthand. 
Una es la larga y la otra es la reducida. 

Propiedad Font (fuente) 

font-style || font-variant || font-weight || font-size / line-height || familia de fuente 

Ejemplo: 

P {font: italic normal bold 12px/14pt Verdana, Tahoma, Arial} 

Propiedad Background (fondo) 

background-color || background-image || background-repeat || background-attachment || background-position 

Ejemplo: 

Body {background: #FFF url(../images/ejemplo.gif) no-repeat fixed center} 

Margin (Margen) 

longitud | porcentaje | auto 

Ejemplo: 

Body {margin: 5px} /* todos los margenes a 5px */ P {margin: 2px 4px} /* margenes superior e inferior a 2px, 
margenes izquierdo y derecho a 4px */ DIV {margin: lpx 2px 3px 4px} /* margen superior a lpx, right margin a 2px, 
bottom margin a 3px, left margin a 4px */ 

Padding (Relleno) 

longitud | porcentaje | auto 

Ejemplo: 

Body {padding: 2em 3em 4em 5em} /* Si definimos cuatro valores estamos aplicando el padding superior, derecho, 
inferior e izquierdo */ Body {padding: 2em 4em) /* Si definimos dos o tres valores, los valores faltantes se toman del 
lado opuesto: superior e inferior a 2em, derecho e izquierdo a 4em */ Body {padding: 5em} /* Si definimos un solo 
valor se aplican a todos los lados */ 

Border(Borde) 

border-width 11 border-style 11 color 
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Ejemplo: 

H3 {border: thick dotted blue} 

Margin 


Articulo por Federico Elgarte 


Pseudo-element en CSS 

Los pseudo-element (pseudo-elementos, si se me permite la traduccion al Castellano) sirven 
para aplicar estilos a partes mas especfficas dentro de una etiqueta. Es decir, para el ejemplo 
concreto de la etiqueta parrafo, con los pseudo-elementos podemos definir el estilo para la 
primera letra del parrafo y para la primera Ifnea. 

Pseudo-element first-letter 

Un efecto habitual de algunas publicaciones, por ejemplo las de cuentos para ninos, es hacer 
mas grande la primera letra de una pagina y decorarla de alguna manera. Con CSS podemos 
aplicar estilos especfficos y hacer, por ejemplo, que esa primera letra sea mas grande y tenga 
un color distinto del resto del parrafo. 

Se utiliza de esta manera: 

P:first-letter { 
font-size: 200%; 

color: #993333; font-weight: bold; 

} 

Asf estamos asignando un tamano de letra 200% mas grande del propio del parrafo. Tambien 
estamos cambiando el color de esa primera letra. 

De entre todas las propiedades de estilos, solo algunas se pueden aplicar a los pseudo- 
elementos first-letter. Son las siguientes, segun la especificacion del W3C: font properties . 
color properties , background properties , 'text-decoration' r 'vertical-align' (solo si 'float' esta 
asignado a 'none'), 'text-transform' r 'line-height' r margin properties , padding properties , 
border properties , 'float' , 'text-shadow' y 'clear' . 

Se puede ver un eiemplo de aplicacion de un estilo con first-letter. 

Pseudo-element first-line 

Como adelantaba, este pseudo-elemento, sirve para asignar un estilo propio a la primera Ifnea 
del texto. Es posible que hayamos visto alguna revista o periodico que utilice este estilo para 


Manual de CSS: www.desarrolloweb.com/manuales/manual-css-hoias-de-estilo.html 

© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacion. 


25 
















dpocsrrolloLueb i 


Tu mejor ayuda para aprender a hacer webs 
www.desarrolloweb.com 


remarcar las primeras Ifneas del parrafo. Un ejemplo de su uso seria el siguiente: 

P:first-line { 

text-decoration: underline; 
font-weight: bold; 

> 

Las propiedades de estilos que se pueden aplicar al pseudo-element first-line son las 
siguientes: font properties, color properties, background properties , 'word-spacing', 'letter- 
spacing' , 'text-decoration' , 'vertical-alion' , 'text-transform' , 'line-height' , 'text-shadow' y 'clear' . 


Se puede ver un eiemplo de aplicacion de un estilo con first-line. 

Uso de clases con los pseudo-elementos 

En determinadas ocasiones podemos necesitar crear una clase (class) de CSS a la que asignar 
los pseudo-elementos, de modo que estos no se apliquen a todas las etiquetas de la pagina. 
Por ejemplo, podemos desear que solamente se modifique el estilo de la primera Ifnea del 
texto en algunos parrafos y no en todos los de la pagina. 

Una clase se define con el nombre de la etiqueta seguido de un punto y el nombre de la clase. 
Si ademas deseamos definir un pseudo-elemento, deberiamos indicarlo a continuacion, con 
esta sintaxis: 

P.nombreclase:first-line { 
font-weight: bold; 

> 

Pseudo-elementos en CSS2 

Aparte de first-line y first-letter, en las especificaciones de CSS 2 existen otros pseudo 
elementos que voy a nombrar para conocimiento de los lectores, aunque profundizare en su 
uso. Se tratan de before y after y sirven para insertar "contenidos generados" antes y despues 
del elemento al que asignemos estos pseudo-element. 

Un ejemplo de ello es: 

P.nota: before { 
content: "Nota: " 

> 

Asf se ha definido una clase de parrafo llamada "note" en la que se indica que antes de la 
propia nota se debe incluir el texto indicado, osea, "Nota: ". 

Atencion a la compatibilidad con CSS2, que, por lo menos para estos elementos, no esta 
soportada en versiones 6 de Internet Explorer. Firefox, en cambio, sf que es compatible con 
estas caracteristicas de CSS2. 


Artlculo por Miauel Anael Alvarez 
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El Modelo de Caja en CSS 

Una primera aproximacion visual 

Tarde o temprano, todo libro o taller practico de CSS queda bajo la influencia del Modelo de 
Caja. 

Es uno de los elementos basicos de las Hojas de Estilo en Cascada y por lo tanto su correcta 
interpretation resulta fundamental a la hora de lograr los resultados deseados en un diseno, 
por mas simple que este resulte. 

Para entrar en tema, vamos a construir un sencillo ejemplo utilizando un unico elemento <div> 
al que aplicaremos un estilo. El resultado producido sera analizado con la ayuda de una figura 
en la que hemos modelado el orden de apilado de los elementos del <div> en una disposicion 
tridimensional que nos ayudara a comprenderlo. 

Supongamos el siguiente codigo (lo mostramos fuera de su contexto, restringiendonos a lo 
significativo para el ejemplo): 

El elemento <div> 


<div> 

<p>Este es el contenido de nuestra caja.</p> 
<p>Este es el contenido de nuestra caja.</p> 
<p>Este es el contenido de nuestra caja.</p> 
<p>Este es el contenido de nuestra caja.</p> 
</div> 


El estilo div { 

background-color: #be4061; /*color bordo para el fondo*/ 
background-image: url('cabeza.jpg'); 

border: lOpx solid #e7a219; /*color naranja para el borde*/ 
margin: lOpx; 
padding: 20px; 

> 


margin: 0 0 20px 0; /*margen inferior de 20 px para el parrafo*/ 
padding: 0; 

> 

El codigo anterior generara una caja como la que muestra la figura siguiente, en la que 
adicionalmente se ha dado color a los elementos transparentes (margen y relleno) solo para 
hacerlos visibles. 

Un detalle interesante que puede apreciarse en la representacion tridimensional en que la capa 
superior del apilamiento no es el borde, como podrfa suponerse intuitivamente. 

La capa situada encima de todas las demas es la de Contenido. 

Aunque el caso especffico sea materia de otro artfculo, comentaremos que esta disposicion fue 
utilizada por el disenador Douglas Bowman de Stopdesign para el rediseno del sitio de 
Blogger, logrando las armoniosas Ifneas curvas de sus paginas mediante CSS, ubicando 
imagenes en la capa de Contenidos de modo que oculten el borde anguloso de las cajas. 
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MARGEN COLOR DE IMAGEN DE RELLENO BORDE CONTENIDO 

(transparent®) FONDO FONDO (transparent®) 



Areas y propiedades 

Cada caja posee, ademas de su area de Contenido, otras tres areas opcionales: 

* Area de Margen - Margin 

* Area de Relleno - Padding 

* Area de Borde - Border 

Cada area, a su vez, puede dividirse en cuatro segmentos segun su posicion: izquierdo (left), 
derecho (right), superior (top) e inferior (bottom). 

El tamano de cada area o de sus segmentos esta dado por el valor de las respectivas 
propiedades, definidas en forma global o discriminadas por segmento. 

Por ejemplo, la siguiente sentencia asignara un margen homogeneo de 20 pfxeles alrededor de 
la caja: 

div { margin: 20px } 

Si en cambio se desea asignar valores distintos a cada uno de los segmentos, pueden 
reflejarse los cuatro valores numericos siguiendo el orden top - right - bottom - left. 

El siguiente ejemplo asigna 10 pfxeles arriba, 5 a la derecha, 20 abajo y nada a la izquierda: 

div { margin: lOpx 5px 20px 0 } 
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Pueden especificarse valores tambien con la siguiente notacion, en la que ya no es necesario 
mantener el orden: 

div { 

margin-top: lOpx ; 
margin-right: 5px ; 
margin-bottom: 20px ; 

> 

En cualquier caso puede obviarse el valor 0 ya que es el valor que toman las propiedades por 
defecto. 

La lista completa de propiedades es la siguiente: 

Propiedades del Margen 

"margin-top", "margin-right", "margin-bottom", "margin-left" y "margin" 

Propiedades del Relleno 

"padding-top", "padding-right", "padding-bottom", "padding-left" y "padding" 


Propiedades del Borde 

1) Ancho (width) 

"border-top-width", "border-right-width", "border-bottom-width", "border-left-width" y 
"border-width". Pueden ser valores especfficos o los valores "thin" (fino), "medium" (medio) y 
"thick" (grueso) 

2) Color (color) 

"border-top-color", "border-right-color", "border-bottom-color", "border-left-color" y "border- 
color" 

3) Estilo (style) 

"border-top-style", "border-right-style", "border-bottom-style", "border-left-style" and "border- 
style". Toma una serie de posibles valores, tales como: none, hidden, dotted, dashed, solid, 
double, groove, ridge, inset y outset. Es una propiedad algo conflictiva ya que no todos los 
navegadores interpretan sus valores de la misma manera. 

Como corolario de esta aproximacion al modelo de caja resta analizar que es lo que se vera en 
cada area cuando la pagina se muestre en un navegador: 

• En el area de Contenido y en la de Relleno se vera aquello que se determine en la 
propiedad "background" del elemento (un color o una imagen, segun el orden de 
apilado). 

• En el area de Borde se vera aquello que se determine en las propiedades del Borde 
(ancho, color y estilo). 

• El area de Margen es siempre transparente. 

El Secreto 

Hay un solo secreto para comprender cabalmente cada una de las propiedades y su utilizacion: 
probar, probar y probar. 


Artfcuio por Fernando Campaha 
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Utilizar porcentajes para tamahos de texto con CSS 

El porcentaje es otra de las medidas o unidades que podemos utilizar en los atributos de hojas 
de estilo en cascada (CSS) para definir un tamano. En este artfculo veremos ejemplos acerca 
de modificar los tamanos de los textos por medio de porcentajes, para conseguir nuevos 
tamanos que sean relativos a los que se estan utilizando. 

Por ejemplo, podriamos definir un estilo para escribir con un texto el doble de grande del que 
se este trabajando: 

<span style="font-size:200%">Este texto es el doble de grande</span> 

Esto quiere decir que el texto sera el doble de grande, 2 por las unidades de texto que 
estemos trabajando. Por ejemplo, si estamos trabajando con tamanos de texto de lOpt, el 
texto dentro del anterior span seria 20pt. El del siguiente codigo ejemplifica este caso 
concreto: 

<span style="font-size:10pt;">Hola amigos <span style="font-size:200%">Este texto es el doble de grande</span> 
</span> 

Lo mismo se puede hacer, pero para definir un texto menor, asignando porcentajes por debajo 
del 100%. Por ejemplo, si quisieramos hacer un texto de la mitad del tamano utilizariamos la 
siguiente etiqueta: 

<span style="font-size:50%">Este texto es la mitad del anterior< ( /span> 

Si estuvieramos trabajando con un tamano de texto de 16pt, con la anterior etiqueta se 
escribiria con tamano 8pt. El codigo seria el siguiente: 

<span style="font-size:16pt;">Hola amigos 

<span style="font-size:50%">Este texto es la mitad del anterior</span> 

</span> 

Ahora vamos a definir un par de clases para un texto mayor y menor, que podriamos utilizar 
para aumentar y reducir el texto respectivamente. 

<style type="text/css"> 

.mayor {font-size: 150%} 

.menor {font-size:75%} 

</style> 

Este codigo indica que la clase mayor es un texto el 150%, es decir, la mitad mas que el 
anterior, y la clase menor un texto del 75%, es decir tres cuartas partes del anterior. 

Podriamos utilizar estas clases con un codigo como este: 

Este es un texto normal <span class="mayor">y este es mayor</span>, este vuelve a ser 
normal <span class="menor">y este es menor</span> 

Los distintos ejemplos de este artfculo podemos verlos en una pagina aparte . 


Artfculo por Miguel Angel Alvarez 
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Problemas del Modelo de Caja en Internet Explorer 5 

Una primera aproximacion visual 

Partiremos de la base de que el lector posee las nociones basicas sobre el Modelo de Caja. 

Basicamente, la "caja" en CSS puede ser asimilada a una tabla con una sola celda. 

De forma obviamente rectangular, esa caja puede tener bordes (border), margenes 
transparentes por fuera de los bordes (margin) y relleno transparente por dentro de los bordes 
(padding). Cualquiera de estos atributos puede ser asignado para cada uno de los cuatro lados 
de la caja separadamente. 

El contenido de la caja se ubicara dentro del area de relleno. 

En general, podemos hablar de dos tipos de diseno: 

• Los disenos "Ifquidos" no asignan un valor especffico al ancho (width) y alto (height) de 
la caja, por lo que resulta que esas dimensiones surgiran del contenedor de la caja y de 
la extension del contenido. Concretamente, el ancho de esa caja sera todo el permitido 
por la estructura que la contenga (utilizara todo el ancho disponible) y el alto sera el 
necesario para mostrartodo el contenido ("crecera" hacia abajo todo lo necesario). 

• Los disenos "estaticos" surgen cuando se decide asignar a la caja un ancho especffico 
mediante la asignacion de un valor concreto a la propiedad "width". 

Los problemas comienzan cuado trabajamos con disenos estaticos. Nuestra caja tendra un 
ancho dado, pero no todos los navegadores interpretaran ese ancho de la misma manera. 

Para el W3C el ancho de una caja se mide desde el Ifmite interno del relleno izquierdo (left¬ 
padding) hasta el Ifmite interno del relleno derecho (right-padding). En caso de no existir 
relleno se toman los Ifmites internos izquierdo y derecho del borde (border-right y border-left). 


Cuando Microsoft lanzo su Internet Explorer 5 para Windows (IE5/win) no respeto este 
estandar, interpretando la propiedad width como el ancho comprendido entre los Ifmites 
exteriores del borde (border-left y border-right). 

Para verlo con mas claridad supongamos un ejemplo sencillo: una caja de 100 pixeles de 
ancho, 10 de relleno, 5 de borde y 10 de margen, todos ellos uniformes. 

El elemento <div> 

<body> 

<div>Aqui el contenido de la caja</div> 

</body> 

Aplicando CSS ... 

div { 

width: lOOpx; 
padding: lOpx; 
border: 5px solid black; 
margin: lOpx; 

> 

En la imagen siguiente (en la que se ha aplicado un color al padding unicamente con fin 
ilustrativo) puede verse una representacion de la diferente interpretacion entre el IE5/win y los 
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demas navegadores y anticipar las desastrosas consecuencias para el diseno final. 
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Tal como se aprecia, la caja se ve mas pequena cuando se la visualiza con IE5/win. 

La version del navegador para Mac (IE5/mac) no tiene ese inconveniente e interpreta la caja 
segun el estandar W3C. 

Afortunadamente, Microsoft remedio este problema en el Explorer 6, pero hay millones de 
usuarios que todavfa utilizan IE5.x/win! 

La solucion en general 

La solucion para este tipo de problemas consiste en utilizar "trucos" que aprovechan 
limitaciones o errores de los navegadores en la interpretacion de CSS. 

Hay varios de estos recursos, denominados en general Box Model Hacks, que basan su accion 
en suministrarle al navegador conflictivo un ancho de caja tal que su representacion resulte la 
esperada, pero sin que este valor afecte a los otros navegadores. 

En el caso de nuestro ejemplo, para igualar las areas de contenido, deberiamos decirle al 
IE5.x/win ( y unicamente al IE5.x/win) que el ancho es un valor tal que incluya relleno y 
borde: 

borde izquierdo + relleno izquierdo + contenido + relleno derecho + borde derecho 

5 px + 10 px + 100 px + 10 px + 5 px 
o sea ... 

width: 130 px; 
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De este modo, la caja se vena identica en todos los navegadores. 

El problema con muchas de las soluciones (hacks) propuestas es que de un modo u otro 
terminaban afectando a otros navegadores menos populares. Por lo tanto, aun cuando la cosa 
mejoraba sustancialmente en terminos de audiencia, faltaba dar todavfa con un recurso que no 
generara efectos indeseados. 

La mejor solucion: Tan hack 

La solucion fue propuesta por Edwardson Tan y reune las inusuales caracteristicas de ser 
simple y perfectamente eficaz. 

Volviendo a nuestro ejemplo: 

<body> 

<div>Aquf el contenido de la caja</div> 

</body> 

y aplicando CSS con algunos cambios ... 

div { 

width: lOOpx; 
padding: lOpx; 
border: 5px solid black; 
margin: lOpx; 

> 

/* Aqui esta el truco, el Tan Hack */ 

* html div { 
width: 130px; 
w\idth: lOOpx; 

> 

Analicemos un poco el codigo del truco. 

Observamos un asterisco (*) al comienzo. El asterisco en CSS es conocido como selector 
universal y alude a todos los elementos que estan contenidos dentro de otro. 

Luego encontramos html, el elemento rafz de toda pagina, y luego nuestro div. 

La regia * html div { } se aplicara a todo elemento div contenido en un elemento html que a 
su vez este contenido en otro. Suena raro, no? 

Para cualquier navegador distinto del Explorer la regia sera interpretada como erronea y por lo 
tanto ignorada, ya que no existe ningun elemento que contenga a html, que acabamos de 
decir que es el elemento rafz. 

El Explorer (en todas las versiones) parece creer en la existencia de un misterioso elemento 
que engloba a html (obviamente se trata de un defecto de estos navegadores), por lo que la 
regia le resultara valida. 

Hasta aquf logramos que unicamente los IE resulten afectados y redefinan el ancho a 130px. 
Solo resta lograr que esa redefinicion del ancho (en el ejemplo a 130px) sea valida unicamente 
para el IE5.x/win, ya que habfamos dicho que tanto el IE5/mac como el IE6 interpretaban 
correctamente el modelo de caja y no necesitan ningun truco para respetar nuestro diseno. 

Para eso utilizamos la siguiente Ifnea, de apariencia un poco extrana: 

w\idth: lOOpx; 
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Tanto el IE5/mac como el IE6 son capaces de ignorar la barra invertida (escape) dentro del 
nombre de una propiedad, siempre que se cumplan determinadas condiciones que detallamos 
mas adelante. 

Los dos navegadores "corregiran" w\idth transformandolo en width y volveran a modificar el 
ancho a lOOpx, su valor correcto. 

El IE5.x/win no puede manejar esa barra invertida dentro del nombre y por lo tanto considera 
a esa Ifnea como erronea y la ignora. El resultado es que el ancho, para IE5.x/win y solo para 
el, permanece en 130px. 

Es exactamente lo que queriamos! 

Un ultimo comentario acerca de la barra invertida dentro del nombre: hay ciertas limitaciones 
en cuanto a su posicion. 

• Debe estar dentro del nombre 

• No debe estar justo antes de cualquiera de las primeras seis letras del alfabeto (a, b, c, 
d, e o f) ya que se interpretaria como un caracter hexadecimal y echaria a perder el 
truco. 

Artfculo por Fernando Campana 


Por que disehar con CSS 

Las tablas existen y existieron desde el comienzo en HTML, pero no se crearon para disenar un 
sitio, sino para la presentacion de datos tabulares. La utilizacion del "border=0"y las imagenes 
transparentes hicieron posible crear una rejilla que permitio a los disenadores organizar textos 
e imagenes, establecer tamanos y ubicar objetos. Pero esto es sencillamente incorrecto. Las 
tablas no se crearon para maquetar y no deben utilizarse para eso, porque de esta forma se 
mezclan presentacion y contenido. 

La solucion es clara: CSS+HTML/XHTML. Afortunadamente, cada vez son mas las empresas 
que deciden dejar atras las tediosas tablas y evolucionar desarrollando sus sitios respetando 
los estandares establecidos por la W3C (organizacion internacional que desde hace unos 12 
anos se dedica al desarrollo de pautas y estandares web), lo que facilita la accesibilidad y la 
correcta visualizacion de las paginas en los navegadores que respeten dichos estandares. 

Algunas de las ventajas de la maquetacion con CSS: 

• Separacion de forma y contenido. Generalmente CSS y HTML se encuentran en archivos 
separados, lo que facilita el trabajo en equipo porque disenador y programador pueden 
trabajar independientemente. Por otro lado, permite el acceso a distintos navegadores y 
dispositivos. 

• Trafico en el servidor. Las paginas pueden reducir su tamano entre un 40% y un 60%, y 
los navegadores guardan la hoja de estilos en la cache, esto reduce los costos de envfo 
de informacion. 

• Tiempos de carga. Por la gran reduccion en el peso de las paginas, mejora la 
experiencia del usuario, que valora de un sitio el menor tiempo en la descarga. 

• Precision. La utilizacion de CSS permite un control mucho mayor sobre el diseno, 
especificando exactamente la ubicacion y tamano de los elementos en la pagina. 
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Tambien se pueden emplear medidas relativas o variables para que la pantalla o la caja 
contenedora se acomode a su contenido. 

• Mantenimiento. Reduce notablemente el tiempo de mantenimiento cuando es necesario 
introducir un cambio porque se modifica un solo archivo, el de la presentacion, sin tener 
que tocar las paginas que contienen la estructura con el contenido. 

• Diseno unificado y flexibilidad. Es posible cambiar completa o parcialmente el aspecto 
de un sitio con solo modificar la hoja de estilos. Por otro lado, el tener el estilo de una 
web en un solo archivo permite mantener la misma apariencia en todas las paginas. 

• Posicionamiento. Las paginas disenadas con CSS tienen un codigo mas limpio porque no 
llevan diseno, solo contenido. Esto es semanticamente mas correcto y la pagina 
aparecera mejor posicionada en los buscadores. Google navega obviando el diseno. 

Recomiendo un sitio simpatico y didactico sobre el tema: 
http://www.effectivetranslations.com/stupidtables/everythina es.html 


Articulo por Serviweb 


Trucos CSS para no enloquecer 

Todavfa no tires el monitor contra la pared. Aquf los principales trucos CSS para hacer frente a 
los tfpicos problemas que se enfrentan los disenadores web cuando maquetan con CSS. Podran 
existir discrepancias entre los lectores, pero aclaro que estas son tecnicas que a mi 
personalmente me han dado resultado, despues de muchas pruebas e intentos aprendf esto... 

Usa un contenedor global para todas las cajas (cuando las cosas se disparan) 

De esta forma estas prefijando globalmente el orden de todas las demas cajas. En referenda a 
este contenedor ordena el resto de las cosas interiores. Es como si haces una cerca o valla 
para que nada es escape. Obviamente estamos hablando de sitios "fijos" no elasticos. 

A veces es bueno usar un contenedor hasta el cuerpo del sitio, luego dejar el pie afuera. 

Ejemplo para un contenedor de 900px centrado: 

#contenedor { 
margin-top: Opx; 
margin-right: auto; 
margin-bottom: Opx; 
margin-left: auto; 
width: 900px; 

} 

Que flote a la izquierda (cuando las cajas se superponen) 

Esta es una muy buena forma de evitar incompatibilidades entre navegadores. El uso de hacks 
de CSS se debfa en gran parte porque se trabajaba "centrando" las cajas. Si por ejemplo 
precisas poner tres cajas de 300px en un contenedor de 900px puedes hacer lo siguiente. 

Ejemplo: 

#caja { 
float: left; 
width: 300px; 

} 


Manual de CSS: www.desarrolloweb.com/manuales/manual-css-hoias-de-estilo.html 

© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacion. 


35 










deocsrroUoujeb i 


Tu mejor ayuda para aprender a hacer webs 
www.desarrolloweb.com 


Calcular bien los paddings o rellenos (cuando las cajas se van abajo) 

Casi todos los dolores de cabeza y maldiciones hechadas sobre el CSS se deben al mal uso o a 
la mala interpretacion que se hace del padding. Pero es mas simple de lo que parece. 

<LPara que sirven los paddings o rellenos? Bueno, lo que hace es generar un "relleno" de 
determinada medida para dar por ejemplo como un margen a los elementos, pero lo hace 
sobre el ancho en pfxeles que este prefijado. Por ejemplo: si tenemos una caja de 300px y le 
aplicamos un padding de lOpx en la izquierda, ahora tendremos una caja de 310px. Esto hara 
desbordar al resto de las cajas y las desplazaran para abajo. Ahf es cuando el disenador 
principiante se vuelve loco. El tema es que si hay una diferencia de hasta un lpx se produciran 
estos desbordes, sino ffjate cuando le incluyes bordes a tu caja, se produciran difrencias. 

Lo que se debe hacer es simple, calcular bien y recordar cada ajuste que se haga de los 
rellenos. Ahora tendremos que hacer una caja de 290px con paddings de lOpx a la izquierda. 

Ejemplo: 

#caja { 
float: left; 
width: 290px; 
padding-left: lOpx; 
background-color: #FFE6DD; 

} 

El pie de pagina con ancho fijo (cuando el pie de pagina enloquece): 

Para entender mejor como funciona el uso de cajas en CSS se puede pensar en un grupo de 
objetos de diferentes formas que luchan por adaptarse y ocupar el espacio que se ha prefijado. 
Sucede muchas veces que los pie de pagina son los mas problemas traen cuando se maqueta 
un sitio. O se va para arriba, se alinea a la izquierda, o se desborda, etc. Muchos resolvfamos 
este tema prefijando valores fijos a las alturas de cajas, pero no tiene sentido. Lo que se debe 
hacer es de nuevo establecer un valor de ancho fijo. De esta forma el pie se va a hacer su 
lugar del resto e ira a parar donde tiene que ir. 

Ejemplo: 

#pie { 

width: 900px; 

background-color: #666666; 

> 

No todo es 1 + 1=2 en CSS (cuando los anchos no cierran) 

Un problema comun en css es pensar que todos los anchos entre cajas cierran perfectamente. 
A veces es necesario jugar con los valores de los contenedores, a veces contrario a la logica 
hay que anadir algunos px a los contenedores. 

OTROS TRUCOS RAPIDOS: 

Trucos sencillos, de los que no hace falta explicar mucho pero que son muy practicos y te 
haran mas facil el trabajo y evitaran posibles errores. 

- Usa colores diferentes para distinguir las cajas 

- Pon una palabra descriptiva en cada caja 

- Comenta el codigo fuente y senala los finales de los contenedores grandes 

- No mezquines espacios entre los divs 

- No seas un fundamentalista y no quieras escribir tu CSS con dos o tres Ifneas. Si no quieres 
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errores escribe lo necesario. 

- Cuidado con el tamano de las imagenes que insertas, estas cambian el ancho de los 
contenedores. 

- Elige bien los nombres de cada div y trata de ser ordenado en el codigo. 

- Si vas a trabajar con varias cajas, trata de agruparlas de a grupo, esto es muy importante. 
Por ejemplo un contenedor que agrupe tres o cuatro cajas. 

CONCLUSION: 

Todas estos parrafos son simplemente algunas sugerencias o comentarios de lo que me ha 
dado resultado a mi. Existen otras muchas "ataduras" de este tipo, si tienes alguna no dudes 
en comentarlas en este mismo artfculo. 

Que pasa cuando no puedes resolver un problema con CSS o similar? A mi me ha dado 
resultado levantarme un rato, hacer cualquier otra cosa y luego volver e intentar de nuevo. 

Dejar de renegar y no enloquecer con CSS dependera de la cantidad de tiempo, trabajo y 
esfuerzo que le metas a tu trabajo. No lo dudes. 


Articulo por Leonardo A. Correa 


CSS semanticas. Un nuevo enfoque 

Lo que es diffcil de encontrar es aquella solucion que se adapte perfectamente a tus 
desarrollos, a tu entorno concreto. Quiza mas diffcil aun es adecuar algun enfoque similar al 
tuyo. Esta tarea es proclive a multiples errores, que iran saliendo conforme se vaya utilizando 
y que llegado el momento, podemos comprobar que nos hemos equivocado de base, lo que 
exige una reestructuracion desde el inicio. 

Este es el contexto en el que nos encontramos actualmente. Tras una fuerte apuesta por la 
reestructuracion y organizacion de CSS basadas en su semantica de uso se ve que si es quiza 
uno de los enfoques mas acertados, deja bastantes puntos abiertos que es necesario concretar. 
Esa es la tarea que nos proponemos aquf. 

Para los no iniciados, comentar que el enfoque semantico se basa en la idea de que la manera 
de estructurar la informacion relativa a la capa de presentacion de nuestros proyectos web 
debe de seguir el criterio de que es y el contexto donde se usa cada elemento. 
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Modelo de datos 
(servidor de base de datos o ficheros) 

MYSQL/ORACLE/... 


El entorno web tiene una caracteristica fundamental que pocos otros tienen y es la capacidad y 
potencialidad de uso en multiples tipos de dispositivos, lo cual nos abre aun mas el abanico de 
puntos que debemos controlar a la hora de crear nuestras hojas de estilos, a la vez que 
multiplica la casufstica y potenciales errores que es necesario controlar. 
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Aquf trataremos de dar una posible solucion que se adecue a los principios de CSS semantica y 
que siga las pautas de accesibilidad y de facilidad de extension a multiples dispositivos. 

Puntos a tener en cuenta 

Estructura jerarquica de las CSS 

Nuestras hojas de estilo seguiran una estructura jerarquica, cuyo elemento principal sera el 
que incluya, para cada tipo de dispositivo, las hojas de estilo correspondientes. 



Pantalla 

C 

1111 1 

Layout Cross Tipograffa Formularios 

Pantalla Browser r 6 



Impresora 

_ 

1 1 | 1 

Layout Cross Tipograffa Formularios 

Impresora Browser 

1 1 ~ 


Movil 

A 

A i -n 


Layout Cross Tipograffa Formularios 

Mri\/I Rrnu/cpr r ° 


Explicacion de cada una de las hojas de estilo 

• Pantalla.css, Impresora.css y Movil.css. Estas son CSS especfficas para cada tipo 
de dispositivo. Su mision en la parte superior de la jerarqufa es la importacion de las 
CSS hijas (@import url("...css") ). No incluyen estilos concretos. 
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• LayoutPantalla.css, Layoutlmpresora.css y LayoutMovil.css. Incluyen la 
informacion relativa a las diversas capas que forman el layout de la pagina, es decir, 
informacion de maquetacion de las distintas zonas del portal (Banner, menus, 
contenidos, creditos, ...) 

• CrossBrowser.css. Aglutina trucos, fixes y demas elementos para hacer que las 
paginas se vean igual en todos los navegadores (Internet Explorer, Mozilla, Firefox, 
Opera, etc.) 

• Tipograffa.css. Cualquier elemento relacionado con las forma en que se presenta la 
tipograffa de la pagina queda recogida aquf.Comienza con una medida relativa de 
62.5% en la etiqueta body, que se establece como medida equivalente a lem. El resto 
de tamanos vendran supeditados a este (mayores: 1.2em, 1.5em, etc..., y menores: 
0.8em, 0.5em, etc.) 

• Formularios.css. Definicion de los estilos aplicables a todas las etiquetas relacionadas 
con los formularios genericos. 

Documentos asociados a este articulo 

• CSS Semanticas . Incluye los distintos CSS descritos. 

• Pagina ejemplo en XHTML con una maquetacion tipo basada en capas 


Articulo por Jose Juan Corpas Martos 


CSS semanticas. Un nuevo enfoque (II) 

Toda la informacion esta basada en el post citado, asf como los ficheros relacionados. 

Recomendaciones de uso y escritura de codigo 

Usar las etiquetas HTML estrictamente para lo que se han concebido 

Si se consigue crear un codigo XHTML lo mas limpio y claro posible se vera reducido 
considerablemente el numero de estilos propios que tendremos que crear y evitaremos la 
mayoria de los errores e inconsistencias comunes. 

• Maquetar en base a capas (div), no usar tablas (table). 

• Parrafos: (p) 

• Encabezados: (hi, h2, ... h6) 

• Tablas: (table, thead/tr/th, tbody/tr/td) 

• Listas: (ul/li, ol/li) 

• Menus: basados en listas con el atributo display:inline 
Uso de medidas relativas en los tamanos de las fuentes 

Las medidas relativas son aquellas que no establecen un tamano fijo en pfxeles o puntos para 
un elemento. En concreto son el porcentaje (%) y el em (lem equivale a 100%, 1.2em a 
120%..., 0.7em 70%, ...) 

Es muy importante este punto por varios aspectos: 

• No todas las personas tienen el monitor a la misma resolucion y nuestra tipograffa le 
puede resultar muy pequena o grande segun el caso. 
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• Al establecer la medida de tipograffa de manera relativa en la etiqueta body, se tomara 
el tamano relativo al navegador y dispositivo que interprete la pagina. Esto es 
especialmente en dispositivos con pequenas pantallas (moviles, pda, etc.). 

Maguetacion de layout fijo basado en capas 

Esta es una antigua polemica, el maquetado de tamano fijo de ancho o el maquetado Ifquido o 
de tamano variable. 

Los estudios de usabilidad web aconsejan el uso de tamanos fijos adecuados a la resolucion 
mas usada por los usuarios de internet, intentando que el porcentaje discriminado sea el 
menor posible. La explicacion de este aspecto se justifica por el constante crecimiento en las 
ventas de monitores de gran tamano (17 pulgadas o mas) y resolucion (1024x768 en 
adelante). 

La expansion de las paginas sobre todos en resoluciones de monitores panoramicos dificulta 
enormemente la legibilidad de los parrafos de texto. 

Crear estilos o redefinirlos solo en el caso estrictamente necesario 

Si creamos nuestras paginas haciendo un uso adecuado de las etiquetas XHTML y seguimos las 
pautas descritas en este documento, se reducira drasticamente la necesidad de creacion de 
estilos innecesarios y redundantes, lo que conlleva enormes beneficios sobre todos relativos a 
la facilidad de mantenimiento y reduccion de errores y comportamientos extranos. 

Artfculo por Jose Juan Corpas Martos 


10 errores comunes en los css 

l.Uso innecesario del valor 0 

El codigo siguiente no necesita la unidad especificada si el valor es cero. 

padding:Opx Opx 5px Opx; 

En su lugar puede ser escrito de esta manera: 

padding:0 0 5px 0; 

De la misma manera es igual para otros estilos. Ej.: 


margin:0; 


No malgastes espacios agregando unidades tales como px, pt, em, etc, cuando el valor es 
cero. La unica razon de hacer esto es si necesitas cambiar estos valores mas tarde. Si no 
declarar estas unidades no tiene sentido. Los pixeles cero son iguales que los puntos cero. 

Sin embargo,line-height puede no tener unidad.Por eso es valido lo siguiente: 


line-height:l; 
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De cualquier manera puedes utilizar una unidad en concreto como em si lo deseas. 

2. Los colores en formato hexadecimal necesitan una almohadilla 

Esto esta mal: 

color: ea6bc2; 

Debe ser: 
color: #ea6bc2; 

O esto otro: 

color: rgb (234.107.194); 

3. Valores duplicados en los codigos de colores 

No escribir el codigo de esta manera: 

color: #ffffff; 

background-color: #000000; 
border: lpx solid #ee66aa; 

Los valores duplicados pueden ser omitidos.Escribiendo los codigos de esta manera: 

color: #fff; 

background-color: #000; 
border: lpx solid #e6a; 

iPor supuesto esto no debes hacerlo con codigos como este! 

color: #fe69b2; 

4. Evitar repeticiones de codigo innecesaria 

Evita usar varias Ifneas cuando lo puedes conseguir con una sola. Por ejemplo, al fijar los 
bordes, algunas veces se debe hacer por separado pero en casos como el siguiente no es 
necesario: 

border-top:lpx solid #00f; 
border-right: lpx solid #00f; 
border-bottom:lpx solid #00f; 
border-left: lpx solid #00f; 

Podriamos resumirlo en una unica Ifnea esta: 

border: lpx solid #00f; 

5. La duplicacion es necesario con los estilos en cascada 

En los estilos en cascada es aceptable repetir el mismo codigo para un elemento elemento dos 
veces, si significa evitar la repeticion mencionada en el punto arriba. Por ejemplo, digamos que 
tenermos un elemento donde solamente es diferente el "border" izquierda. En vez de poner 
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cada "border" escrito usando cuatro Ifneas, uso solo dos: 

border: lpx solid #00f; 
border-left: lpx solid #fOO; 

En este caso primero definimos todos los "borders" con el mismo color pero mas tarde para 
ahorrarnos dos lineas de codigo redefinimos el "border" izquierda a otro color, de esta manera 
hemos ahorrado dos Ifneas de codigo. 

El ejemplo malgastando espacio quedarfa asf: 

border-top:lpx solid #00f; 
border-right: lpx solid #00f; 
border-bottom:lpx solid #00f; 
border-left: lpx solid #fOO; 


Obviamente supuestamente este ahorro de carga supone un retraso en la carga de la pagina 
pues estamos definiendo el "border" izquierda dos veces, pero la carga de este proceso es 
insignificante. 

6. Los estilos invalidos no hacen nada 

Un ejemplo es suficiente para explicar este error: 

padding:auto 

Este estilo solo puede ser aplicado a width y height pero no a padding. 

7. Codigo Especffico para cada navegador 

Obviamente este tipo de codigo solo funcionara en el navegador al que va destinado , pero es 
hay que pensar si es rentable puesto que solo algunos usuarios podran apreciar esos cambio. 

8. Espacio perdido 

No estoy seguro del porque pero muchos disenadores estan empenados en desaprovechar el 
espacio en su codigo, usando un monton de innecesarios saltos de Ifnea. Recuerda que eso 
solo lo veras tu y estas haciendo un uso excesivo de ancho de banda. Tambien tu codigo sera 
mas facil de leer puesto que tendra menos "boquetes". 

Por supuesto es sabio dejar un cierto espacio para mantenerlo legible, aunque a algunos les 
encanta condensar todo, no dejando ningun espacio. 

9. Especificar los colores sin usar palabras 

Definir los colores usando las palabras que lo definen no es una buena idea puesto que 
estarfamos confiando en el navegador para que el interprete que color y codigo debe 
aplicar.Las tonalidades para un mismo nombre de color cambian mucho de un navegador a 
otro. 

Es una buena practica especificar siempre el color por su codigo hexadecimal. 

Ej.: utilizar "#fff" en lugar de bianco. 

10. Agrupar estilos identicos 
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Es comun ver los estilo escritos una y otra vez con el mismo codigo, aun cuando el estilo es 
igual. 

Sena conveniente agruparlos y asi optimizariamos espacio: 

hi, p, #footer, .intro { 
font-family:Arial, Helvetica, sans-serif; 

> 

Tambien nos hara mucho mas facil la tarea de actualizar el codigo. 

Artfculo por Manu Gutierrez 


Introduction a CSS3 

Desde que CSS comenzo han pasado muchos anos y ya vamos por la especificacion de CSS3, 
que incorpora una serie de novedades que vamos a tratar de resumir en este artfculo. 

Que es CSS 

Si no sabes lo que es CSS probablemente te interesarfa comenzar leyendo nuestro manual de 
CSS o la seccion de CSS a fondo . No obstante, cabrfa decir que CSS es un lenguaje para definir 
el estilo o la apariencia de las paginas web, escritas con HTML o de los documentos XML. CSS 
se creo para separar el contenido de la forma, a la vez que permite a los disenadores 
mantener un control mucho mas preciso sobre la apariencia de las paginas. 

Con CSS3, mas control sobre la forma 

El objetivo inicial de CSS, separar el contenido de la forma, se cumplio ya con las primeras 
especificaciones del lenguaje. Sin embargo, el objetivo de ofrecer un control total a los 
disenadores sobre los elementos de la pagina ha sido mas diffcil de cubrir. Las especificaciones 
anteriores del lenguaje tenfan muchas utilidades para aplicar estilos a las webs, pero los 
desarrolladores aun continuan usando trucos diversos para conseguir efectos tan comunes o 
tan deseados como los bordes redondeados o el sombreado de elementos en la pagina. 

CSS 1 ya signified un avance considerable a la hora de disenar paginas web, aportando mucho 
mayor control de los elementos de la pagina. Pero como todavfa quedaron muchas otras cosas 
que los disenadores deseaban hacer, pero que CSS no permitfa especificar, estos debfan hacer 
uso de trucos para el diseno. Lo peor de esos trucos es que muchas veces implica alterar el 
contenido de la pagina para incorporar nuevas etiquetas HTML que permitan aplicar estilos de 
una manera mas elaborada. Dada la necesidad de cambiar el contenido, para alterar al diseno 
y hacer cosas que CSS no permitfa, se estaba dando al traste con alguno de los objetivos para 
los que CSS fue creado, que era el separar por completo el contenido de la forma. 

CSS 2 incorporo algunas novedades interesantes, que hoy ya utilizamos habitualmente, pero 
CSS 3 todavfa avanza un poco mas en la direccion, de aportar mas control sobre los elementos 
de la pagina. 

Asf pues, la novedad mas importante que aporta CSS 3, de cara a los desarrolladores de webs, 
consiste en la incorporacion de nuevos mecanismos para mantener un mayor control sobre el 
estilo con el que se muestran los elementos de las paginas, sin tener que recurrir a trucos o 
hacks, que a menudo complicaban el codigo de las web. 

Propiedades nuevas en CSS3 
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He aquf una lista de las principales propiedades que son novedad en CSS3. 

Bordes 

• border-color 

• border-image 

• border-radius 

• box-shadow 

Fondos 

• background-origin 

• background-clip 

• background-size 

• hacer capas con multiples imagenes de fondo 

Color 

• colores HSL 

• colores HSLA 

• colores RGBA 

• Opacidad 

Texto 

• text-shadow 

• text-overflow 

• Rotura de palabras largas 

Interfaz 

• box-sizing 

• resize 

• outline 

• nav-top, nav-right, nav-bottom, nav-left 

Selectores 
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• Selectores por atributos 

Modelo de caja basico 

• overflow-x, overflow-y 


Otros 


• media queries 

• creacion de multiples columnas de texto 

• propiedades orientadas a discurso o lectura automatica de paginas web 

• Web Fonts 

Este listado de nuevas propiedades de CSS3 lo he sacado de: http://www.css3.info/preview/ . 
Es un sitio en ingles, pero puede estar bien visitar para ir conociendo mas detalles sobre CSS3. 

En futuros artfculos daremos algunas claves y explicaciones sobre varias de estas propiedades, 
al menos las mas interesantes, con especificaciones detalladas, asf como ejemplos que sirvan 
para ir conociendo esta nueva especificacion de CSS. 

Artfcuio por Miauel Anael Alvarez 


Bordes redondeados en CSS 3 

CSS 3 incorpora nuevas propiedades para el control de bordes de los elementos. Ahora se 
permiten bordes con las esquinas redondeadas, bordes con imagenes (incluso varias imagenes 
se pueden utilizar para definir el aspecto del borde, sombras, etc. 

En este artfcuio vamos a explicar como realizar bordes redondeados con CSS3. 

Tenemos la propiedad border-radius, que permite definir bordes redondeados en las esquinas, 
especificando las medidas del radio que deben darse a la curva de las esquinas 

border-radius: 5px; 

Definirfa un radio de 5 pfxeles en el redondeo de las esquinas del elemento. Por el momento 
Mozilla ha adoptado este atributo con un nombre especial, que es valido para productos como 
Firefox, mientras que las especificaciones de CSS3 no hayan alcanzado el estado "Candidate 
Recommendation", que es cuando se supone que los distintos navegadores deben 
implementarlas. El nombre del atributo por el momento es: 

-moz-border-radius 

Por lo que respecta a Internet Explorer hay que decir que todavfa no soporta este atributo de 
CSS 3, pero esperemos que los chicos de Microsoft lo puedan implementar pronto en el 
navegador, o que las especificaciones de CSS3 pasen rapido al estado "Candidate 
Recommendation", que serfa el llamamiento para que se implementen en la generalidad de los 
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navegadores. 

Por el momento, para navegadores Mozilla, el atributo border-radius se utilizaria, por ejemplo, 
asf: 

DIV { 

border: lpx solid #000000; 

-moz-border-radius: 7x; 
padding: lOpx; 

> 

Con esto conseguimos que todos los div tengan un borde redondeado en las esquinas de radio 
de 7pfxeles. 

Podemos ver el ejemplo en una pagina aparte. Pero recordar que solo se vera el efecto 
utilizando Firefox o navegadores basados en Mozilla. 

Pero el atributo border-radius tiene otras posibles configuraciones, en la que se pueden definir 
los valores para el radio de las cuatro esquinas por separado. De esta manera: 

-moz-border-radius: 7px 27px lOOpx Opx; 

Asf estarfamos definiendo un borde redondeado con radio de 7 pixel para la esquina superior 
izquierda, luego 27px para la esquina superior derecha, de lOOpx para la inferior derecha y 
Opx para la inferior izquierda. (Hay que explicar que un border-radius de Opx es un borde con 
esquina en angulo recto) 

Podemos ver este ejemplo en una pagina aparte. 

Los bordes redondeados con CSS 3, como se podra imaginar, solo se ven si se tiene definido 
algun borde visible al elemento que se los asignamos, ya sea solid, dotted, etc. Eso es lo que 
definen las especificaciones de CSS3, aunque en el momento de escribir el artfculo debo 
senalar que incluso Mozilla o Firefox (el unico que por ahora soporta este atributo de CSS3) no 
funciona del todo correctamente con esto y solo muestra los bordes redondeados con solid. 

Otra cosa que definen las especificaciones de CSS y que por el momento no esta funcionando 
del todo bien, es que las imagenes de fondo deben ajustarse a los bordes redondeados. 
Ocurre, por el momento, que las imagenes de fondo salen por fuera de los bordes 
redondeados. Confiamos en que en el futuro esto pueda ser revisado y optimizado, para que 
todo funcione correctamente. Debemos recordar que en el momento de escribir el artfculo 
todavfa se tienen que terminar de definir las especificaciones de CSS 3 y despues, los 
navegadores web deberan actualizarse en un cierto espacio de tiempo para soportarlas 
completamente. 

Nota: Ofrecimos una lista de las caracterfsticas principales de CSS 3 en el artfculo Introduccion a CSS3 . 
Artfculo por Miauel Anael Alvarez 
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